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).
Javascript: Event.srcElement & Ghosted Elements
Moderator: General Moderators
-
tomprogers
- Forum Commoner
- Posts: 50
- Joined: Fri Mar 17, 2006 5:17 pm
- Location: Minnesota
- Contact:
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
-
tomprogers
- Forum Commoner
- Posts: 50
- Joined: Fri Mar 17, 2006 5:17 pm
- Location: Minnesota
- Contact:
Thanks, but I'm actually deliberately avoiding the bloat of prototype and scriptaculous. I was originally using them, then realized I didn't need about 80% of their features. If I can figure out how to fix this little glitch, I should be home free, and with a memory footprint a million times smaller than I would have had with those libraries.