Create Ext.dd.DragSource and Ext.dd.DropTarget : Drag Drop « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Drag Drop

Create Ext.dd.DragSource and Ext.dd.DropTarget

  


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
  new Ext.dd.DragSource("drag");
  new Ext.dd.DropTarget("drop", {
    notifyDrop : function(source, event, data) {
      this.getEl().appendChild(source.getEl());
    }
  });



});

</script>
<body>
  <div id="drag">Drag Me</div>
  <div id="drop">Drop Here</div>


</body>
</html>








Related examples in the same category

1.Set up drag and drop zone
2.Field to grid drag and drop
3.Drag and drop between two grids
4.Define notifyDrop handler
5.Create DropTarget object
6.Drop and drop from a table to a form