From Learn About the Ext JavaScript Library

Being with Ext for a couple of months, searching for help and helping on forums I have realized that there is a lot of questions on the subject of Drag & Drop and that there is lack of examples. So comes this tutorial...

Contents 1 Preface 2 Drop Target Highlighting 3 Try it 4 Custom Drop Action 5 Try it again

Preface

If you haven't read the first part of this tutorial do it now because otherwise the following text will not make sense for you. We're going to add a drop target highlighting and custom action on drag end in this part.

Drop Target Highlighting

Let's add one more container with items to our html markup:

<div class="dd-ct" id="dd2-ct">
    <div class="dd-item" id="dd2-item1">Item 2.1</div>
    <div class="dd-item" id="dd2-item2">Item 2.2</div>
    <div class="dd-item" id="dd2-item3">Item 2.3</div>
</div>

Then add lines to dd.js so that the init function reads:

init: function() {
 
    // drop zones
    var dz1 = new Ext.dd.DropZone('dd1-ct', {ddGroup:'group'});
    var dz2 = new Ext.dd.DropZone('dd2-ct', {ddGroup:'group'});
 
 
    // container 1
    var dd11 = Ext.get('dd1-item1');
    dd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group');
 
    var dd12 = Ext.get('dd1-item2');
    dd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group');
 
    var dd13 = Ext.get('dd1-item3');
    dd13.dd = new Ext.dd.DDProxy('dd1-item3', 'group');
 
 
    // container 2
    var dd21 = Ext.get('dd2-item1');
    dd21.dd = new Ext.dd.DDProxy('dd2-item1', 'group');
 
    var dd22 = Ext.get('dd2-item2');
    dd22.dd = new Ext.dd.DDProxy('dd2-item2', 'group');
 
    var dd23 = Ext.get('dd2-item3');
    dd23.dd = new Ext.dd.DDProxy('dd2-item3', 'group');
 
}

If you would test it now nothing would change in appearance or behavior. We need to override two more functions:

onDragOver: function(e, targetId) {
    //console.log('dragOver: ' + targetId);
    if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
        var target = Ext.get(targetId);
        this.lastTarget = target;
        target.addClass('dd-over');
    }
},
onDragOut: function(e, targetId) {
    //console.log('dragOut: ' + targetId);
    if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
        var target = Ext.get(targetId);
        this.lastTarget = null;
        target.removeClass('dd-over');
    }
}

What we're doing here? We have registered two drop zones, our container divs, with the same ddGroup as our items have. Therefore our onDragOver and onDragOut functions are called when we're dragging an item both over container and over another item.

We filter out dragging over items for the simplicity of this tutorial (in real application you can write some actions also for items) and we remember the last drag over target (this.lastTarget). We will need it later. Adding and removing css classes highlights containers when dragging over them.

Try it

Navigate to your dd.html and try to drag items. Not so bad, yeah? Containers highlight and we can move our items around and drop them.

Anyway, let's add some more functionality...

Custom Drop Action

Add this override:

endDrag: function() {
    var dragEl = Ext.get(this.getDragEl());
    var el = Ext.get(this.getEl());
    if(this.lastTarget) {
        Ext.get(this.lastTarget).appendChild(el);
        el.applyStyles({position:'', width:''});
    }
    else {
        el.applyStyles({position:'absolute'});
        el.setXY(dragEl.getXY());
        el.setWidth(dragEl.getWidth());
    }
    Ext.get('dd1-ct').removeClass('dd-over');
    Ext.get('dd2-ct').removeClass('dd-over');
}

What's that? If we have a drop target (remembered by onDragOver) we append the source element to it and we tweak styles a bit. If we don't have target we just position the source element to the place where the proxy was dropped and tweak styles too.

Try it again

Good! Now you should be able to drag item from its container and place it anywhere on the page or you can append it either to its original or other container. This is almost usable for a real application, isn't it?

The code above has not been optimized in any way and I'm not trying to say that it cannot be done better but I hope that it helps you to understand the "secrets" of Drag & Drop in Ext.

Happy Dragging!

• Custom Drag and Drop Part 1
• Custom Drag and Drop Part 3

• Ext Programmer's API Documentation
• Ext User Forums