Comments on: Event Delegation based DHTML Drag and Drop? http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop It's all spinning wheels and self-doubt until the first pot of coffee. Thu, 11 Mar 2010 12:23:09 +0000 hourly 1 http://wordpress.org/?v=3.0-alpha By: Batiste http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-384686 Batiste Tue, 20 Jan 2009 10:06:54 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-384686 <p>A jQuery solution for Drag and Drop with event delegation :</p> <p>http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html</p> A jQuery solution for Drag and Drop with event delegation :

http://batiste.dosimple.ch/blog/posts/2008-05-18-1/jquery-drag-and-drop-and-resize-event-delegation.html

]]> By: Justin Meyer http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-356104 Justin Meyer Sat, 31 May 2008 07:43:52 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-356104 <p>I am working on the exact same issue for JavaScriptMVC. If you haven't seen JavaScriptMVC, check out its trunk. In the controller2 plugin, you'll find a really nice event delegation library.</p> <p>I've only thought of 1 way to do event delegation drops. It's crazy, but it might work.</p> <p>First, style Drags so their z-Index is LOWER than the Drops. You want your mouse to hit the droppable areas.</p> <p>Once a droppable is moused over by dragging a drag to it, it creates a transparent element in the exact same position as the Droppable. It also lowers the droppable z-Index. This gives the appearance that the draggable is over the droppable.</p> <p>To simulate movement, the transparent droppable's mouseovers are sent to the draggable.</p> <p>On mousing out of the transparent Droppable, it sets everything back to normal.</p> <p>I haven't tried this yet. The biggest issue I see is that when you grab a draggable in the middle, half of it will be behind the droppable until the mouseover happens. This isn't ideal, but maybe there is something that can be done about that.</p> I am working on the exact same issue for JavaScriptMVC. If you haven’t seen JavaScriptMVC, check out its trunk. In the controller2 plugin, you’ll find a really nice event delegation library.

I’ve only thought of 1 way to do event delegation drops. It’s crazy, but it might work.

First, style Drags so their z-Index is LOWER than the Drops. You want your mouse to hit the droppable areas.

Once a droppable is moused over by dragging a drag to it, it creates a transparent element in the exact same position as the Droppable. It also lowers the droppable z-Index. This gives the appearance that the draggable is over the droppable.

To simulate movement, the transparent droppable’s mouseovers are sent to the draggable.

On mousing out of the transparent Droppable, it sets everything back to normal.

I haven’t tried this yet. The biggest issue I see is that when you grab a draggable in the middle, half of it will be behind the droppable until the mouseover happens. This isn’t ideal, but maybe there is something that can be done about that.

]]> By: misuba http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-47648 misuba Mon, 06 Nov 2006 22:26:55 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-47648 <p>I'm interested to see your approach. (FWIW, Proto hasn't touched Object.prototype for a couple of versions now.)</p> I’m interested to see your approach. (FWIW, Proto hasn’t touched Object.prototype for a couple of versions now.)

]]> By: l.m.orchard http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-47593 l.m.orchard Mon, 06 Nov 2006 19:06:03 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-47593 <p>misuba: Nope, the Scriptaculous approach gives me problems too. The first is that I don't like Prototype, unless they've stopped messing with Object.prototype since I last checked. The second is that DnD in Scriptaculous involves juggling lots of little objects ilke most other DnD implementations I've found. When I have an outline of 100's to 1000's of items, that really blows. I think I've got an approach working now that's significantly lighter weight.</p> misuba: Nope, the Scriptaculous approach gives me problems too. The first is that I don’t like Prototype, unless they’ve stopped messing with Object.prototype since I last checked. The second is that DnD in Scriptaculous involves juggling lots of little objects ilke most other DnD implementations I’ve found. When I have an outline of 100’s to 1000’s of items, that really blows. I think I’ve got an approach working now that’s significantly lighter weight.

]]> By: misuba http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-47388 misuba Mon, 06 Nov 2006 02:40:19 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-47388 <p>I think the dragdrop stuff in scriptaculous would get you most of this... at least, it is good about draggable elements having handles you can specify (e.g. child elements of the thing you want to drag), and flexible about what sorts of targets you can land on.</p> I think the dragdrop stuff in scriptaculous would get you most of this… at least, it is good about draggable elements having handles you can specify (e.g. child elements of the thing you want to drag), and flexible about what sorts of targets you can land on.

]]> By: Ben http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-46407 Ben Thu, 02 Nov 2006 13:10:53 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-46407 <p>I presume the problem is that, given a point on the screen, you want to find exactly what DOM element is beneath it.</p> <p>I found a solution for this in my proof-of-concept structured editor http://www.fluffy.co.uk/stediting/ -- you need to know where the mouse was clicked to insert the caret.</p> <p>It might be a start anyway.</p> I presume the problem is that, given a point on the screen, you want to find exactly what DOM element is beneath it.

I found a solution for this in my proof-of-concept structured editor http://www.fluffy.co.uk/stediting/ — you need to know where the mouse was clicked to insert the caret.

It might be a start anyway.

]]> By: l.m.orchard http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-46251 l.m.orchard Wed, 01 Nov 2006 19:18:52 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-46251 <p>Gareth: Yup, the issue I have with the mouseUp is that getTarget gives me what was under the mouse when I let go of the button - namely, the element I've been dragging around, not the element under the thing being dragged. In addition, for user feedback <em>during</em> the drag (ie. at mouseMove time), I want to know what's under the dragged element - so I can highlight the potential landing spot, etc.</p> Gareth: Yup, the issue I have with the mouseUp is that getTarget gives me what was under the mouse when I let go of the button – namely, the element I’ve been dragging around, not the element under the thing being dragged. In addition, for user feedback during the drag (ie. at mouseMove time), I want to know what’s under the dragged element – so I can highlight the potential landing spot, etc.

]]> By: Gareth Andrew http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-46246 Gareth Andrew Wed, 01 Nov 2006 18:57:21 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-46246 <p>I'm sure I've missed something obvious - why can't you simply use the same event delegation approach on the mouseUp event? getTarget should return the node you've dropped on, what else do you need?</p> I’m sure I’ve missed something obvious – why can’t you simply use the same event delegation approach on the mouseUp event? getTarget should return the node you’ve dropped on, what else do you need?

]]> By: Nick http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop/comment-page-1#comment-46013 Nick Wed, 01 Nov 2006 00:19:27 +0000 http://decafbad.com/blog/2006/10/31/event-delegation-based-dhtml-drag-and-drop#comment-46013 <p>You know, Marty and I were talking tonight about how some of your posts make NO sense to us. She even said "it's like he's talking another fucking language".</p> <p>Damn Programmers!!</p> <p>--nick</p> You know, Marty and I were talking tonight about how some of your posts make NO sense to us. She even said “it’s like he’s talking another fucking language”.

Damn Programmers!!

–nick

]]>