The removeChild/appendChild combo could potentially disorganize your DOM tree. If you really need your events to fire, just call your event function directly rather than messing up your DOM (cache the elements that it needs to be fired on if necessary).

Collin Miller said on December 11, 2006


Yes, I suppose I was approaching the problem with too powerful a tool.

One could simply set the display style to none and then back to whatever it was.

The point I was trying to get across is that firefox has a work-around for the obstacles of event delegation in a drag/drop situation.

In the minute instance your dragged element is hidden the onmouseover/onmousemove events of the elements underneath the dragged element will fire and the dragged element will not flicker.

A handy trick if you're in the right situation and don't want to muck around with determining offsets.

Though I do like some of the advantages of offsets. Such as determining what percentage of the draggable and the droppable are intersecting.

Milan Jaric said on January 22, 2007

Ok, here is tip. Suppose we have table elements ( rows ) as draggables/droppables, and cells are data containers. In this case we could just perform drag action of any row from source table an dragOver over destination table whitch will satisfied condition isDraggedOver for example when row is over dropping zone (the other, destination, table) and when we perform below code, on mouseup event:


the draggedRow will change it's parent to destination table, and wil be disappeared from source table because it can not reside as single instance of it self in two diferent parents.
If you whant copy of that Object you have to do it like this:

destinationTable.appentChild(new draggedRow);

This piece of code works on both, IE and FF. In this case you have a copy of dragged row in destination. Now you can drag again the same, original, row and append it to destinationTable as many times as you whant. It is nice solution for, lets say Shopping carts ;)
<hr />
As concerns offsets, and event delegates, instead of inventing wheel again, you should consider finaly use a wheel. There is a lot of js libs which waitng you to ride them, if they are to forward, big and have as concerns code for your project, you can cut them to functional pieces. One solution is JQuerys Interface. see .
Finaly, don't take me wrong, especially author of this article. I think this site is great for essential knowledge of javascript, maybe one of the best i have saw.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.