Rich Rodecker’s blog on flash, flex, actionscript, javascript, and php, with a dash of randomness
Drag and Drop in Flex
I was trying to implement drag and drop for a loaded Image today. All I needed to do was move it, and constrain the drag to the parent container, and that’s it. In two different books I have on flex, and in the documentation, as well as this tutorial, they talk about implementing drag and drap through a series of steps which include:
- importing the DragManager, Drag Source, and Drag Event classes
- Creating a new DragSource object
- Creating a new proxy image, which is the item that is visibly being dragged
- Setting up another object oto act as as a drop target and handle drag events
After getting 90% complete with that method, I ran across a comment on the Flex LiveDocs which pointed me to the blatantly obvious: you can simply use the startDrag() and stopDrag() methods inherited Sprite.
Durr.
about 2 years ago
I think generally from a Flash standpoint, people associate DnD as a set of features acted upon a movieClip exactly as your case. The DnD concept for Flex however means more of dropping data to and from list-based classes.
But to tell the truth, I went down that same avenue when I started getting into DnD. If you are interested in a concept much like the google personalized homepage widgets, I made a framework called UICDragNDrop. I don’t have it uploaded anywhere but I can certainly send you the code if you are interested.
j
about 2 years ago
That’s true, and a good point. Like I mentioned in my post, I was only interested in draggin an image around…all that setup just to do that was overkill.
Sure, I’ll check out that framework, i think it’d be interesting…shoot it over whenever you can.
about 2 years ago
The Flex DnD handles drop areas, icons, and drop effects unlike startDrag which just dargs your item as you required.
I have an old example here
http://www.tink.ws/blog/simple-flex-20-drag-example/
about 2 years ago
as an anti-flex flash lover, I seriously doubt whether the effects flex offered really worth all the trouble. I believe the DragManager is just a class using startDrag and stopDrag. It’s beautifully done, but problems rise when designers ask, “can we make it more translucent when dragging it? And can we remove the cross when dragging to a wrong place? or at least let’s change the red cross to yellow one?”
about 2 years ago
yeah, i’m realizing now that it say right in the DragManager documentation that it’s all about the data:
@5566: wow, i have been using flex for a while and love it….i’m not sure how you can be anti-flex.
Anyway, the ‘translucency’ of the image being dragged is simply passed as a parameter to the DragManager.doDrag().
The cursors are also just styles of the DragManager class.
about 2 years ago
Yep its pretty easy to cusomize, but the nicest thing is that you are also passing data around, not just visual items.
about 2 years ago
The problem with using start/stop drag is that the item you’re dragging may get clipped by its container – the drag manager handles display much further up the chain so the item being dragged is always visible – plus it gives pointer cues indicating when and where you can release the dragged item…
about 2 years ago
Ian – another good point…however in my case that’s all that was needed. I specifically didn’t need items being dragged outside the container it was in.
about 2 years ago
alright so nearly 6 months have passed, but I finally got around to redoing the thing and have a lib for drag n’ drop.
You can read the post here
and the project resides here
about 1 year ago
@rich:
“The cursors are also just styles of the DragManager class.”
I have an AIR application. I want to set the drag cursors as they appear in the http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop coins example. How do I accomplish this? :S I’ve tried doing the following:
var dragInitiator:Image = new Image();
dragInitiator.source = draggedImg.icon;
dragInitiator.cursorManager.setCursor(customCursor, CursorManagerPriority.HIGH, 0, 0);
but it keeps on using the “windowish” ones instead of the Cursor I declared with:
[Bindable]
[Embed("/img/cc.png")]
private var customCursor:Class;
Any help is appreciated.
HC