Results 1 to 2 of 2

Thread: Cancel drop event in tree

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Vote Rating

    Default Cancel drop event in tree

    Question: How can you cancel a drop event in a tree, AND cancel the animation that moves the dropped item back to its original position?

    Currently, I have code to drag and drop from one tree to another. I copy the node to be dropped because I don't want the original node to be removed. The cloned drop node replaces a similar node in the drop region.

    To do this I use the beforenodedrop event handler. This all works fine, but after replacing the node and cancelling the event I still get an animation moving the dropped node back to the original tree. I also tried adding preventDefault and stopPropagation but it didn't make any difference. How can I get rid of this animation? Any suggestions welcome.



    Sample code:

    		function(e) {
    			//Copy the node to be dropped. (We don't want to remove the original node.)
    			var n = e.dropNode;
    			var newNode = new Ext.tree.TreeNode( Ext.apply({}, n.attributes) );
    			var groupId =;
    			//Replace the matching node from this group.
    			var target =;
    			if (!target.hasChildNodes()) {
    				target = target.parentNode;
    			var oldNode = target.findChild("group", groupId);
    			if (oldNode) {
    				target.replaceChild( newNode, oldNode );
    			e.cancel = true;
    			// How to prevent the "failed drop" animation? 
    		{stopPropagation: true, preventDefault: true}

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Vote Rating


    Hi Max,
    before e.cancel=true; try e.dropStatus = true; and it removes the animation.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts