Simple Drag and Drop in ExtJS - Drag Code

Drag Code

onCompRender: function (component, eOpts) {
  component.DragZone = Ext.create('Ext.dd.DragZone', component.getEl(), {
    // Override the getDragData function
    // Notice that we used the component element dom rather that the 
    // dom returned by the event. This is to get uniform behavior for 
    // containers
    getDragData: function (e){
        var compEl = component.getEl(), 
        cloneEl;

        // Clone the dom element
        cloneEl = compEl.dom.cloneNode(true);
        // generate an new Id
        cloneEl.id = Ext.id();

        // We must return ddel, repairXY is a nice feature. 
        // All other data is for the drop zone to consume
        return {
            ddel: cloneEl,
            repairXY: Ext.fly(e.getTarget()).getXY(),
            componentClone: component.cloneConfig()
        };      
    },
    getRepairXY: function(){
        return this.dragData.repairXY;
    },
    ddGroup: 'auGroup'
  });
}

Drag Code Explained

A new DragZone is instanciated and stored for possible later use in the component. Ext.dd.DragZone takes two parameters: the element that will host the dragzone (in our case: component.getEl()) and a config object.

The config object:

  1. Overrides the getDragData function
  2. Overrides the getRepairXY function
  3. Assigns a dd group

 The most important of these is the getDragData function. In short, this function:

  • Clones the DOM node that represents the widget we're dragging.
  • Assigns a new id to it so they're won't be a duplicate.
  • Returns a object contaiining:
    • ddel: our cloned DOM node
    • repairXY: the cordinates to snap back to for a failed drag.
    • componentClone: a clone of our original component/container to be added to the drop zone container.

Now we take a similar approach and add the code below to the render event function of the container that will receive the dropped widgets