From Learn About the Ext JavaScript Library

Contents 1 Preface 2 Drop Targets 3 Test 1 4 Processing Drops 5 Test 2

Preface

If you haven't already done so, please read Advanced Custom Drag and Drop Part 1 or the following text will not make any sense to you.

Drop Targets

Let's assume for now that we do not need items to be drop targets, only containers. Declare private variables for them:

// private variables
var dragZone1, dragZone2, dropTarget1, dropTarget2;

and create them in the init function just after DragZones:

dropTarget1 = new Tutorial.dd.MyDropTarget('dd1-ct', {
    ddGroup: 'group',
    overClass: 'dd-over'
});
dropTarget2 = new Tutorial.dd.MyDropTarget('dd2-ct', {
    ddGroup: 'group',
    overClass: 'dd-over'
});

Of course, we need our extension class MyDropTarget (empty for now):

Tutorial.dd.MyDropTarget = function(el, config) {
    Tutorial.dd.MyDropTarget.superclass.constructor.call(this, el, config);
};
Ext.extend(Tutorial.dd.MyDropTarget, Ext.dd.DropTarget, {
 
});

Test 1

Test it! As expected, we haven't got too much with empty extension class. Just target highlighting.

Processing Drops

Add the following function to the extension class so that it reads:

Ext.extend(Tutorial.dd.MyDropTarget, Ext.dd.DropTarget, {
    notifyDrop: function(dd, e, data) {
        this.el.removeClass(this.overClass);
        this.el.appendChild(data.item);
        return true;
    }
});

What it does? It removes highlighting class from the container of drop and then it appends the dragged child to it.

Test 2

Test it! We can change order of items in one container or move an item to the other container. Yes, drop logic is simple but I hope it helps you to understand the principle.

• Advanced Custom Drag and Drop Part 1

• Ext Programmer's API Documentation
• Ext User Forums