Tree + Drag n Drop disable selection during drag

[dustismo]

I have a tree where the nodes are movable within the tree and selecting a node submits a form (reloading the page). Problem is that a selection always happens when a node is dragged. How can I disable selection during dragging?

thanks for any help,
Dustin

[gigel]

I also have a tree that loads data on "selectionchange". I would like the "selectionchange" to be fired when the user releases the mouse button (the "mouseup" DOM event). This way, the user can move tree items without being interrupted by the loading. Would that be possible to configure somehow?

[mailme_gx]

bump!

any examples/tips on how to suspend selection during dragging?

GX

[mailme_gx]

here is my solution, may not be the most correct/elegant but serves my purpose :

Ext.override(Ext.tree.TreeDragZone, {
    b4MouseDown : function(e){
        var sm = this.tree.getSelectionModel();
        if(sm != null)
            sm.suspendEvents(true);
        Ext.tree.TreeDragZone.superclass.b4MouseDown.apply(this, arguments);
    }
});
 
Ext.override(Ext.tree.TreeDragZone, {
    onMouseUp : function(){
        var sm = this.tree.getSelectionModel();
        if(sm != null)
            sm.resumeEvents();
        Ext.tree.TreeDragZone.superclass.onMouseUp.apply(this, arguments);
    }
}); 

Hope this will help someone.

GX

[dark4ce]

1. try declaring a global var like "nodeWasClicked" which is initialy false

2. add a beforeselect event an disable select if node was not clicked like this:

treeSelModel.on('beforeselect',function(selModel,newNode,oldNode){
        if(!nodeWasClicked)
            return false;
    });

3.add an onclick event to your tree like this:

click: function(n){
                    nodeWasClicked=true;
                    n.select();
                    nodeWasClicked=false;
                }

now the nodes in the tree will only be selected when clicked and not on drag

hope this helps...gave me alot of headakes

[alwintom]

I have been trying to tackle this issue and both of the above methods did not work completely.
mailme_gx's method does a good job. It prevent node selection while you start dragging a node. but when you release the mouse button, it selects the node that was dragged.
On the other hand, dark4ce's did not have this problem. However, it had another issue. If you dragged a node and after that every call node.select() will fail. This is because the nodeWasClicked is set to false and beforeselect listener will fail.

My solution wass to extend/alter mailme_gx's method. The problem with his method, was when you resume the events on selection mode, the queued up events will be invoked and cause the selection of node. The solution is to clear the queued up events if the operation was a drag. But how do we differentiate between a drag and click. Well if you have been dragging, the point where you pressed your mouse button and the point where you released will be different.

Ext.override(Ext.tree.TreeDragZone, {
    lastClickAt: null,
    b4MouseDown : function(e){
        var sm = this.tree.getSelectionModel();
        this.lastClickAt = e.getXY();
        if(sm != null)
            sm.suspendEvents(true);
        Ext.tree.TreeDragZone.superclass.b4MouseDown.apply(this, arguments);
    }
});
 
Ext.override(Ext.tree.TreeDragZone, {
    onMouseUp : function(e){
        var sm = this.tree.getSelectionModel();
        var loc = e.getXY();
        if(sm != null && (this.lastClickAt == null || (this.lastClickAt[0] == loc[0] && this.lastClickAt[1] == loc[1])) )
            sm.resumeEvents();
        else{
            sm.clearEventQueue();
            sm.resumeEvents();        
        }
        Ext.tree.TreeDragZone.superclass.onMouseUp.apply(this, arguments);
    }
}); 

Ext.override(Ext.tree.DefaultSelectionModel, {
    clearEventQueue : function() {
        var me = this;
        delete me.eventQueue;
    }
});