Drag and Drop Advice

[rpsirois]

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?

Thanks

[rpsirois]

So far this article has been the most helpful:

http://stackoverflow.com/questions/7...tree-drag-drop

[rpsirois]

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 );
                            }
                        });
                    });