There are clearly two parts to creating a working drag-and-drop feature—the dragging, and the dropping. As these are two separate operations, we'll handle them separately for our simple use case.
The first part we need to look at is the drag action. Ext will enable this using the Ext.dd.DragSource
, which actually makes the whole thing a breeze. Assume that you've got a<div>
element on your page with an ID, dragMe:
new Ext.dd.DragSource("dragMe");
That's all you need to get up and running!
Try running this code and grab hold of your element. You can now drag it around the page, but there's a little bit more to it than that. Ext JS provides a few extra features by default which will be demonstrated by this code.