Saturday, August 30, 2008

Custom Drag and Drop for Lists in Flex 3

Yesterday I spent far too long trying to figure out why my custom dragDrop handler for the Flex 3 mx.controls.Tree class wasn't being called.

I had all the relevant callbacks (dragDrop, dragEnter, dragOver, dragExit) registered, had trace() statements in place so I could watch their behavior, and had dropEnabled set to true on the Tree. I could see trace() output coming from my dragEnter, dragOver and dragExit handlers. Still, I was getting nothing from the only one which really mattered: dragDrop. I tried playing around with DragManager.acceptDragDrop, tried calling preventDefault() as the first call in the event callbacks, and various other voodoo, but all to no avail. What could possibly be wrong?

The answer: in order for the dragDrop callback you set to actually get called, you need to set dropEnabled to false! The property described by Adobe as "A flag that indicates whether dragged items can be dropped onto the control" has to be set to "false" in order to actually receive the dragDrop event. Go figure.

The semantics of this property are, in reality, "A flag that indicates whether to use the default behavior for accepting dragged items, which is to assume that the object being dropped here is the object we expect, and to accept all. Set to false if you want to override this behavior."

This isn't just true for the Tree class, either. This is true for all controls which inherit from ListBase, which is quite a few, including HorizontalList, TileList, FileSystemList, Menu, Tree and DataGrid. Hopefully in Flex 4 sanity will prevail and they'll rename this property something a little more intuitive.

Side note: I also considered the title "Worst Property Name Ever" for this post.

1 comment:

Anonymous said...

Thank heavens for your post! I have been working on my darned custom dragdrop for days and this was the solution.