Hi jQuerians! I had a long conversation with Stefan today (the guy who started the wonderful Interface library, for those of you who are new) about the performance of drag and drop operations. There are different approaches for both scriptaculous and interface and real-life applications:
1.) Interface's approach: Interface measures all possible droppables when initiating the drag. Advantages: 1.) After drag initalizing, dragging is very fast, does not lag, 2.) option to highlight possible drag targets at start Disadvantages: 1.) It takes a very long time to "pick up" a draggable, when dealing with lots of droppables. (See the demo: http://labs.pb-projects.de/test/index.html) 2.) Scriptaculous' approach: Scriptaculous does nothing on drag start, but triggers a function everytime you move the mouse ("mousemove" event), which than checks for the position and looks if there is a overlapping droppable (droppable position by parsing the dom tree). Advantage: The dragging starts immediately. Disadvantage: Dragging is very slow when dealing with lots of droppables (especially deep nested ones). (See the demo: http://labs.pb-projects.de/test/index2.html) 3.) Real world approach (Yahoo, Live Mail, others) Instead of using the real draggable element, the use a helper div, which is attached to the cursor. Notice: The cursor is not _over_ the helper, but has an offset of i.e. -5/-5 relative to the helper. Advantage: Very very fast in performance, because you can check for the target/srcElement, rather than checking the position of droppables Disadvantage: The cursor cannot be on top of the helper. We now came to the conclusion that we should have 2 or 3 versions of Draggables: 1.) The old one (Nifty but slow, for few droppables) 2.) The new one (Fast, event delegation [without parsing the DOM tree], but needs some tweaking parameters every time) 3.) The helper draggables (very fast, cursor must be off the element) For making it easier to decide which to use, we could provide a helper on top, draggables.js, that automatically selects the preffered version in regards of how many nodes you use for droppables and where the cursor position is. We are waiting for comments and ideas on this very important decision, since it will be a major rewrite and change. -Paul -- Paul Bakaus Web Developer
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
