Hi All
I have attached a simple example of the kind of things I want to do
with dragging and dropping, namely dragging an object across different
components in my app. In this example I have a list and two canvases
and you can drag from the list to the canvases and between the canvases
But I want make a few subtle but significant changes in my real app
which have been causing problems for me so I thought I'd ask if anyone
has any suggestions on the path to take. Otherwise I'll start building
it up the way I do it in my current app and maybe someone can spot
what I'm doing wrong. Here are the things I want to do
1. Actually move the object when dragging, not have a proxy shown and
then the object move on drop. I found somewhere showing you could use
the object itself instead of a proxy and I am doing that, but I have a
horrible "flicker" when I start the move and I can't seem to get rid
of it. Then my object randomly dissapear and I can't tell why :)
(none of this is shown on the sample code though)
2. I don't want the animation on drop. It becomes more obvious when
moving the actual object, but I just want to move the object and when
they drop, have it stop. I have looked at the DragManager and it looks
like there is no way to avoid this without monkey patching which is
not acceptable.
I am using the DragManger because the moves need to happen within the
canvases as well as between them and I want the moves to be seamless.
But if the only way to do this is to move them on the parent, do edge
detection, and then initiate the drag when leaving, then please let me
know.
thanks,
charles
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.core.DragSource;
private var _dragDownPt:Point;
private function
onDraggableItemMouseDown( event:MouseEvent ):void
{
var target:Canvas = Canvas( event.currentTarget );
var dragSource:DragSource = new DragSource();
_dragDownPt = new Point(event.localX, event.localY);
dragSource.addData(_dragDownPt,"dragOffset");
DragManager.doDrag( target, dragSource, event, null,
0, 0, 0.5, true );
}
private function onCanvasDragEnter( event:DragEvent ):void
{
DragManager.acceptDragDrop( Canvas( event.target ) );
}
private function onCanvasDragDrop( event:DragEvent ):void
{
var dropCanvas:Canvas = event.currentTarget as Canvas;
var dragOffset:Point =
Point(event.dragSource.dataForFormat("dragOffset"));
var child:Canvas;
if (event.dragInitiator is Canvas )
{
child = event.dragInitiator as Canvas;
if(child.parent != dropCanvas)
{
child.parent.removeChild(child);
dropCanvas.addChild(child);
}
}
else
{
if (event.dragSource.hasFormat("items"))
{
if
( event.currentTarget.hasOwnProperty("hideDropFeedback") )
{
event.currentTarget.hideDropFeedback(event);
}
var items:Array =
event.dragSource.dataForFormat('items') as Array;
child = createLabel(items[0].label);
dropCanvas.addChild(child);
}
}
if ( dragOffset != null )
{
child.x = dropCanvas.mouseX - dragOffset.x;
child.y = dropCanvas.mouseY - dragOffset.y;
}
else
{
child.x = dropCanvas.mouseX;
child.y = dropCanvas.mouseY;
}
}
private function createLabel(name:String):Canvas
{
var newChild:Canvas = new Canvas();
var label:Label = new Label();
label.text = name;
newChild.addChild(label);
label.x = 2;
label.y = 2;
newChild.addEventListener(MouseEvent.MOUSE_DOWN,
onDraggableItemMouseDown, false, 0, false);
newChild.width = 100;
newChild.height = 20;
newChild.setStyle("backgroundColor","#0FFF00");
return newChild;
}
]]>
</mx:Script>
<mx:Model id="objects">
<states>
<state label="Alabama" data="AL"/>
<state label="Alaska" data="AK"/>
<state label="Arizona" data="AZ"/>
<state label="Arkansas" data="AR"/>
<state label="California" data="CA"/>
<state label="Colorado" data="CO"/>
<state label="Connecticut" data="CT"/>
<state label="Alabama2" data="AL"/>
<state label="Alaska2" data="AK"/>
<state label="Arizona2" data="AZ"/>
<state label="Arkansas2" data="AR"/>
<state label="California2" data="CA"/>
<state label="Colorado2" data="CO"/>
<state label="Connecticut2" data="CT"/>
</states>
</mx:Model>
<mx:HBox x="10" y="10" width="100%" height="100%">
<mx:VBox width="50%" height="100%">
<mx:Label text="Drop area 1"/>
<mx:Canvas id="canvas1" width="100%" height="100%"
backgroundColor="#FFFFFF"
dragEnter="onCanvasDragEnter( event );"
dragDrop="onCanvasDragDrop( event );" >
<mx:List id="list" x="0" y="0"
dataProvider="{objects.state}"
height="200"
dragEnabled="true" dragMoveEnabled="true" />
<mx:Canvas id="label1" x="100" y="10" width="100"
height="20" backgroundColor="#0FFF00"
mouseDown="onDraggableItemMouseDown( event );">
<mx:Label x="2" y="2" text="Draggable"/>
</mx:Canvas>
<mx:Canvas id="label2" x="100" y="40" width="100"
height="20" backgroundColor="#0FFF00"
mouseDown="onDraggableItemMouseDown( event );">
<mx:Label x="2" y="2" text="Draggable too"/>
</mx:Canvas>
</mx:Canvas>
</mx:VBox>
<mx:VBox width="50%" height="100%">
<mx:Label text="Drop Area 2"/>
<mx:Canvas id="canvas2" width="100%" height="100%"
backgroundColor="#FFFFFF"
dragEnter="onCanvasDragEnter( event );"
dragDrop="onCanvasDragDrop( event );" />
</mx:VBox>
</mx:HBox>
</mx:Application>
