Ext.js - Drag and Drop

Drag and drop feature is one of the powerful features added to make the developer’s task easy. A drag operation, essentially, is a click gesture on some UI element, while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.

Syntax

Adding drag and drop class to the draggable targets.

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

Adding drag and drop target class to drappable target.

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});