Forums

Let's say I have a grid of images and I want the user to be able to drag them around. There are some valid and invalid drop targets as well.

I used DD Proxy with cloneNode: true to let the user drag around the image. On drag:start I set the visibility of the original node to hidden to give the illusion that they're dragging the real one, but here's where it gets complicated:

If the user drops on an invalid zone, I want to animate the drag proxy back to the original position of the image, then unset the visibility of the original image.

This will not work when using cloneNode: true because the DD Proxy plugin listens to the DragDropManager's drag:end, then removes the cloned proxy from the DOM only if cloneNode is true. This happens before my DragDelegate's drag:end is fired, so I can't jump in before Proxy runs its drag:end handler, stop propagation, do my animation then when it completes, re-fire.

I could potentially hook into DDM's drag:end, but this functionality only pertains to this particular part of the page and there may be multiple draggable elements that may or may not have DD Proxy plugged in.

What's a clean way to handle the animation of cloned drag proxies on drag:end?

EDIT: I figured out a workaround, but I don't really like it. On drag:start, I manually copy over the styles I want the proxy to have. This will quickly get annoying when I change what styles comprise that set! However, it does work. The proxy animates to the drop zone if the user drops on it, and back to its host's starting position if the user drops anywhere else.

Fiddle: http://jsfiddle.net/yLKM6/3/