View Full Version : Drag and Drop Advice

15 Aug 2012, 7:51 AM
What is the best way to go about drag and drop functionality? I have spent several hours reading and experimenting, with not a whole lot of success. It seems like some of the examples out there are from Ext 3 and don't necessarily work the same way in Ext 4.

If I could get exactly the same functionality as jQuery's UI drag and drop I'd be in good shape. What I need is a fairly generic way to move anything around and drop it anywhere. For example, moving items back and forth between data views, grids, tree grids, and vanilla panels.

I won't get started on tree panels, but each node depth contains different type nodes, so each needs to have their own handler - not just a blanket handler for the entire tree. All the nodes in the application would have enough metadata for the other nodes to decide what to do with them.

Another problem I ran into with the tree grids is that I can't assign a simple css class to nodes... I assume there is a way to do this, and I am just missing it?


15 Aug 2012, 8:06 AM
So far this article has been the most helpful:


17 Aug 2012, 12:42 PM
Is there a way to add drop listeners like normal binds would work?

This is the best I can come up with and it doesn't work (#notifyEnter: fires less often than more):

Ext.select('div.imageSelector').each( function( el ) {
console.log( el.dom );
var dropTarget = new Ext.dd.DropTarget( el.dom, {
ddGroup: 'categoryDD',
copy: true,
notifyDrop: function (dragSource, e, data) {
var record = data.records[0].data;
console.log( record );
console.log( this );
notifyEnter: function( source, e, obj ) {
console.log( source, e, obj );