Javascript: Event.srcElement & Ghosted Elements
Posted: Tue Jan 09, 2007 6:11 pm
I've implemented a drag-and-drop interface that allows the user to select multiple things, then drag them around. As in Windows Explorer, a "ghost" of the current selection moves around with the mouse cursor during the drag. This works just fine.
I need to identify which page element was under the cursor when the user let up on the mouse. And this is the problem: technically, the mouseup event (which terminates the drag, subsequently destroying the ghosts) fires on the ghost (because it is directly under the cursor), not the element that is beneath the ghost (in 3D space).
Any ideas?
FYI: In my implementation, "ghosting" creates a deep clone of the "selectable" item, then appends the clone to the document's BODY element. I use absolute positioning to keep the ghost(s) stationary relative to the cursor. As a result, travelling up the parentNode chain from the srcElement will very quickly dead-end at the BODY or DOCUMENT tag (I don't know or care which, as both are useless).
I need to identify which page element was under the cursor when the user let up on the mouse. And this is the problem: technically, the mouseup event (which terminates the drag, subsequently destroying the ghosts) fires on the ghost (because it is directly under the cursor), not the element that is beneath the ghost (in 3D space).
Any ideas?
FYI: In my implementation, "ghosting" creates a deep clone of the "selectable" item, then appends the clone to the document's BODY element. I use absolute positioning to keep the ghost(s) stationary relative to the cursor. As a result, travelling up the parentNode chain from the srcElement will very quickly dead-end at the BODY or DOCUMENT tag (I don't know or care which, as both are useless).