Adobe has a great article over at the Flex Developer Center on how to add drag-and-drop support to your Flex application:
http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/
This article provides a great foundation for developers who want to learn how drag-and-drop works inside Flex.
However all their examples use what’s called a “drag proxy” for their drag operations, which is pretty weak if you want a true drag-and-drop look-and-feel in your application.
The problem with using a drag proxy is that the object being dragged looks like it’s being copied instead of dragged. The original object is only moved after the drag operation is complete.
That may be good enough for some applications, but when you want your objects to look like they’re being moved in real-time, this “copy effect” just doesn’t cut it.
So let’s take a look at what goes into a drag operation.
The first parameter in the DragManager.doDrag() method is the dragInitiator. This is the component that started the drag operation.
As it turns out, the dragInitiator is all you need to improve the look-and-feel of your drag operations.
If you pass the dragInitiator in as the dragImage for your drag operation, the DragManager will drag the component directly!
How’s that for simple?
4 comments
Comments feed for this article
November 14, 2008 at 2:24 am
debacelar
Can you put some code? I’ve try what you said but there is problem when you drop dragInitiator. It thinks it’s dragImage and it tries to remove it, but then generates error.
November 14, 2008 at 9:58 am
Nick Schneble
What’s the error?
November 15, 2008 at 1:54 pm
debacelar
Well not an error, but there is an awkward behavior when you try to drag some object that is child of another object. When you do mouse down on object that you want to drag, it first moves to Stage for a moment and then when you do mouse move it moves to its original position. I think that it’s because DragManager.doDrag() does something like localToGlobal(). I don’t have an idea how to solve this. You can look an example with source at http://www.konaklux.in.rs/DragManagerProblem/DragManagerLikeStartDrag.html. Code is very simple.
January 7, 2009 at 10:17 am
Nick Schneble
@debacelar
To prevent the flicker you see, all you need to do is specify an x-offset and y-offset in the doDrag() method.
The offsets should be the inverse of the (x,y) position of the component you want to drag.
For example, your component is at (x=63, y=79) in the parent canvas. Therefore your doDrag() method should be changed to this:
DragManager.doDrag (dragInitiator, new DragSource(), event, dragInitiator, -63, -79);