FlashApe

FlashApe » Drag and Drop in Flex

Drag and Drop in Flex

August 9th, 2007
4:15 pm

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.

Flex

11 People had this to say...

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.

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.

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/

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?”

yeah, i’m realizing now that it say right in the DragManager documentation that it’s all about the data:

The DragManager class manages drag and drop operations, which let you move data from one place to another in a Flex application.

@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.

Yep its pretty easy to cusomize, but the nicest thing is that you are also passing data around, not just visual items.

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…

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.

[...] the web and came across an old comment I had left on someone else’s blog.Â You can read that here.Â Then they emailed me asked if I had examples.Â After trudging around a bit I found em.Â Dusty [...]

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

@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.

Drag and Drop in Flex

11 People had this to say...

Want your say?

Contact

Search this site

Gullible

Links

Categories

Archives