Yahoo! UI Multiple Drag With Proxy
The Yahoo! UI dragdrop.js library provides the interesting moment hooks needed to implement multiple selection for dragging one or more items simultaneously. In this example, I create an Apple
subclass of YAHOO.util.DDProxy
. We can select multiple apples and drag them with a single proxy.
YUI multiple drag with proxy example
Note: Before dissecting the code, you may want to read my Class-based inheritance in JavaScript entry
Comments
Have something to write? Comment on this article.
Nige,
Thanks for the feedback.
The Apple proxy should try to replicate the look of the dragged elements.
It should collect clones of them into whatever kind of container they require (since they're just divs, this would be a div), and show them while dragging.
This won't be the desired effect in all cases. In my application I do not need this, it will slow down the dragging process, and for this example it would cloud the essence of what is happening.
Also, control-click on an already-selected Apple, shoud unselect it.
It's true. But this adds a complication. When the item is unselected the drag process is already underway and must be killed. Otherwise the other items that are still selected will start to drag with the proxy. This may not be bad in some cases but I think users would find it unexpected behavior
Because the code I found to to do this requires a bit of a hack to avoid a JavaScript error, I decided to make it a second example. You can see version two
Thanks for this example...I am following your program logic in my own app but trying to implement this on links within a treeview as opposed to a unordered list but unfortunately firefox opens new tabs when control is held and a link clicked.I have tried the .stopEvent method from the Event library but unfortunately this doesn't work....I will keep on trying though :)
Have something to write? Comment on this article.
Nice. But The Apple proxy should try to replicate the look of the dragged elements.
It should collect clones of them into whatever kind of container they require (since they're just divs, this would be a div), and show them while dragging.
Also, control-click on an already-selected Apple, shoud unselect it.
Just keeping you on your toes!
Nige