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 June 3, 2006

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

Peter Michaux June 3, 2006

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

Carlton July 20, 2006

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.