How to implement custom drag functionality in a Flex list control

apache-flex

Flex has built in drag-n-drop for list controls, and allows you to override this. But they don't cover this in examples. The built-in functionality automatically drags the list-item, if you want to override this you find the handlers are being set up on the list itself.
What I specifically want to do, is my TileList shows small thumbnails of items I can drag onto a large Canvas. As I drag an item from the list, the drag proxy should be a different image.

So, I followed the technique suggested and it only works if I explicitly set the width/height on the proxy Image. Why?

Best Answer

It's not obvious until you've tried it =) I struggled with the same thing just a few weeks ago. This was my solution:

The list:

<List>
  <mouseDown>onListMouseDown(event)</mouseDown>
</Tree>

The mouse down handler:

private function onMouseDown( event : MouseEvent ) : void {
  var list : List = List(event.currentTarget);

  // the data of the clicked row, change the name of the class to your own
  var item : MyDataType = MyDataType(list.selectedItem);

  var source : DragSource = new DragSource();

  // MyAwsomeDragFormat is the key that you will retrieve the data by in the
  // component that handles the drop
  source.addData(item, "MyAwsomeDragFormat");

  // this is the component that will be shown as the drag proxy image
  var dragView : UIComponent = new Image();

  // set the source of the image to a bigger version here
  dragView.source = getABiggerImage(item);

  // get hold of the renderer of the clicked row, to use as the drag initiator
  var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));

  DragManager.doDrag(
    rowRenderer,
    source,
    event,
    dragView
  );
}

That will start the drag when the user clicks an item in the list. Notice that I don't set dragEnabled and the other drag-related properties on the list since I handle all that myself.

It can be useful to add this to the beginning of the event handler:

if ( event.target is ScrollThumb || event.target is Button ) {
  return;
}

Just to short circuit if the user clicks somewhere in the scrollbar. It's not very elegant but it does the job.

Related Solutions

How to “unaccept” a drag in Flex

Are you using only the dragEnter method? If you are trying to reject the drag while still dragging over the same component you need to use both the dragEnter and dragOver methods.

Check out this example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.core.DragSource;
            import mx.managers.DragManager;
            import mx.events.DragEvent;

            private function onDragEnter(e:DragEvent):void {
                if ( e.target == lbl ) {

                    if ( e.localX < lbl.width/2 ) {
                        trace("accept");
                        DragManager.acceptDragDrop(this);
                    }
                    else {
                        DragManager.acceptDragDrop(null);
                    }
                }
            }

            private function doStartDrag(e:MouseEvent):void {
                if ( e.buttonDown ) {
                    var ds:DragSource = new DragSource();
                    ds.addData("test", "text");

                    DragManager.doDrag(btn, ds, e);
                }
            }
        ]]>
    </mx:Script>
    <mx:Label id="lbl" text="hello world!" left="10" top="10" dragEnter="onDragEnter(event)" dragOver="onDragEnter(event)" />
    <mx:Button id="btn" x="47" y="255" label="Button" mouseMove="doStartDrag(event)"/>
</mx:Application>

R – Cannot get file data from the clipboard using Flex

I assume this is a part of an AIR application. (Accessing the clipboard from a plain Flex app is not possible.)

I have no experience with AIR, but your second code block is clearly wrong. An URLRequest instance does nothing in itself, it is but a static object storing the request details. In order to fetch the data from that URL, you need to create a Loader, and pass the request to that loader like this:

var req:URLRequest = new URLRequest(value.file.url); // this is a local file (e.g. file:///C:/somefile.jpg)
var ldr:Loader = new Loader();
ldr.addEventListener(Event.COMPLETE, function(event:Event):void {
   var b:Bitmap = event.target.content as Bitmap;
});
ldr.load(req);

Of course, you'd have to fill in the Event.COMPLETE handler. Note that the Loader class can be used to load SWF and image objects, for all everything else, you'd have to use URLLoader and parse the data yourself.

Regarding the nativeDragDrop block, here's a snippet from the documentation:

Typically a handler for the nativeDragEnter or nativeDragOver event evaluates the data being dragged, along with the drag actions allowed, to determine whether an interactive object can accept a drop. To specify that an interactive object is an eligible target, the event handler must call the NativeDragManager.acceptDrop() function, passing in a reference to the object. If the user releases the mouse button over the designated object, the object becomes the drop target and dispatches the nativeDragDrop event.

Are you calling NativeDragManager.acceptDrop() properly?

Best Answer

Related Solutions

How to “unaccept” a drag in Flex

R – Cannot get file data from the clipboard using Flex

Related Topic