View Full Version : beforenodedrop event

22 Jan 2007, 8:08 AM
Hi everyone,

I came across yui.ext this weekend and I'm especially interested in the new TreePanel.

When a node is moved I want to make sure that the changes are recorded in the database before de node is actually dropped in the target.
So, I'm using the event 'beforenodedrop' to make a server request to save the changes. However, as the calls are, by default, async I'm unable to 'cancel' the event if the changes are not properly saved.

I'm tempted to use a sync request... but ?. :?

Is there any other way to do this?


22 Jan 2007, 12:16 PM
Drop and drop is inherently a syncronous operation. The life-cycle of a drag and drop is mouse down to mouse up.

There's a thread somewhere in this forum with an alternate way this can be done. Basically in consists of allowing the drop, recording the available info and rolling it back if validation fails (and alerting the user).

22 Jan 2007, 12:21 PM
Thanks for your quick answer.
I found your work truly amazing. Congratulations.

I've seen the post that you mentioned and understand the principle.
However how can I manually revert the node?s position?
Can you please give some hints?


22 Jan 2007, 12:34 PM
Well, beforenodedrop occurs before the node is moved. So get the node's parentNode property and it's current index:

var parentNode = node.parentNode;
var oldIndex = parentNode.indexOf(node);

If validation fails, call

parentNode.insertBefore(node, parentNode.childNodes[oldIndex]);

and you move the node back.

22 Jan 2007, 3:30 PM
Thanks a lot.
I?ll give it a try.


24 Jan 2007, 4:58 AM
Hello Jack,

I just want to give you some feedback on the issue I've started.
I tried your solution and it work when moving nodes in the same 'parent', but it failed when moving between different parent nodes.

So, I've added another argument that is passed to the failure handler. It's the nextSibling property of the node that's being moved.

If the update fails, then I use parentNode.insertBefore(node, nodeNextSibling);
If the nextSibling its null there?s no problem, it is inserted in the last position of the parentNode.

Once again thanks for your help!!

Great work!!

5 Jul 2008, 2:14 AM
I have read your posts, but i can't find the post what you said, if you see the post, please tell me, thanks.

By the way, i did it like you said, but some nodes can roll back, someones can't.
The following is the function called when the validation fails.

function dragDropRollBack()
if((!ddContainer) || (!ddContainer.sourceNode) || (!ddContainer.sourceParentNode) || (!ddContainer.destParentNode))
return false;

var sNode = ddContainer.sourceParentNode.insertBefore(ddContainer.sourceNode,ddContainer.nodeNextSibling);
var sNode = ddContainer.sourceParentNode.appendChild(ddContainer.sourceNode);

ddContainer = null;