Flex Component Move with the help of drag and drop
In this Flex tutorial we can illustrate how a component move in the container with the help of drag and drop component of flex.
In this Flex tutorial we can illustrate how a component move in the container with the help of drag and drop component of flex.Flex Button Drag and Drop with X and Y Co-ordinate :-
In this tutorial you can drag and drop for button with x and y co-ordinate or move one place to another in container. In this tutorial we can explain how to use Drag Manager, Drag Source, Drag Event . we can do that process manually through action script function.
Example:-
<?xml version="1.0"?>
<!-- dragdrop\DandDImage.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
private function mouseMoveHandler(event:MouseEvent):void
{
var dragInitiator:Button=Button(event.currentTarget);
var dragSource:DragSource = new DragSource();
dragSource.addData(dragInitiator, "button");
DragManager.doDrag(dragInitiator, dragSource, event);
}
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("button"))
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
}
private function dragDropHandler(event:DragEvent):void {
Button(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Button(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY;
}
]]>
</mx:Script>
<mx:Canvas id="myCanvas"
width="100%" height="100%"
borderStyle="solid"
backgroundColor="#ffffff"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);">
<mx:Button id="mybutton" label="Drag Button" mouseMove="mouseMoveHandler(event);"/>
</mx:Canvas>
</mx:Application>
Output:-
