Question

I’m dragging from a TileList to a custom component. I want to know what is being dragged before I accept it. How do I set the “format” that is used for “event.dragSource.formats” in the DragEvent?

Edit for clarification:
When you set “dragEnabled=true” on the TileList, it takes care of the drag source stuff, but it uses “items” as the format for the DragEvent. I’m looking for a way to have the TileList use the correct format.

Answer 1

Hey, this is a great question, and quite complex. Because Flex is primarily developed by Adobe, they don’t have the power/resources/money to cover edge/customization cases like this. If only they decentralized Flex’s development!

I’ve had to deal with this problem too. It boils down to the fact Flex has hard-coded specific data source ‘types’ into the ListBase source, so you can’t change the types. That’s good and bad… Check out all the drag[Type]Handler methods in that ListBase class and see what’s going on.

All we need to do is intercept the DragEvent.DRAG_START event and call event.stopImmediatePropagation() (luckily flex will listen to that!). Here’s an example app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.DragEvent;
            import mx.managers.DragManager;

            protected function updateDragSource():void
            {
                selected = !selected; // flip;
                sourceType = selected ? "mySource" : "items";;
            }

            protected function dragEnterHandler(event:DragEvent):void
            {
                if (!event.dragSource.hasFormat(sourceType))
                    event.stopImmediatePropagation();
            }

        ]]>
    </mx:Script>

    <mx:Boolean id="selected"/>
    <mx:String id="sourceType">items</mx:String>

    <mx:TileList id="list" width="100%" height="100%" labelField="name"
        dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
        dragEnter="dragEnterHandler(event)">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object name="one"/>
                <mx:Object name="two"/>
                <mx:Object name="three"/>
                <mx:Object name="four"/>
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:TileList>

    <mx:Label text="Change Drag Source Type:"/>
    <mx:Button id="button" click="updateDragSource()" label="{sourceType}"/>
</mx:Application>

This gives you the base for checking if dragSource.hasFormat returns true/false. If you want to change what the dragSource’s format is, you’re going to have to extend TileList and override all of the drag methods :/. The items and orderedItems are hard-coded into ListBase, so you can’t change the format easily.

The only way you can use your own formats is to not use any of the ListBase-extending classes, and implement your own drag/drop system. It’s not that bad. The reason is because, if you look into all the drag event handlers in ListBase, they have things like this:

var dragSource:DragSource = event.dragSource;
if (!dragSource.hasFormat("items") && !dragSource.hasFormat("orderedItems"))
    return;

So if they’re not that format, it won’t allow you to drag.

Hope that helps,
Lance