R – Flex: How to drag the actual element rather than a proxy

apache-flexdrag and drop

I'm trying to implement a dragging system which can only be described as similar to dragging the map on Google Maps. I can set up dragging easily in Flex, but unfortunately the standard model of dragging i.e. dragging an element proxy and dropping it in another element is not what I'm after.

Is there anything built into flex where the actual element rather than a proxy can be repositioned in a different place within the same parent? Or will I have to hand code something using mouse events as you would if implementing a solution in JavaScript?

Cheers,

Chris

Best Answer

DragManager and its associated constructs are specifically for dragging and dropping. You will likely want to place your draggable item inside of a canvas with scroll policies turned off, and capture MOUSE_DOWN on the object, then activate MOUSE_MOVE, translating its origin analogous to the change in mouse position, deactivating the MOUSE_MOVE listener when MOUSE_UP or Event.MOUSE_LEAVE fires on the stage.

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 – Implementing drag manually on a Flex List

I'm thinking your drag initiator should be the item renderer that you are dragging rather than the entire List control.

Best Answer

Related Solutions

How to “unaccept” a drag in Flex

R – Implementing drag manually on a Flex List

Related Topic