Flex Component Move with the help of drag and drop


 

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));

}

}

0

private function dragDropHandler(event:DragEvent):void {

Button(event.dragInitiator).x =

Canvas(event.currentTarget).mouseX;

1

Button(event.dragInitiator).y =

Canvas(event.currentTarget).mouseY;

}

2

]]>

</mx:Script>

3

<mx:Canvas id="myCanvas"

width="100%" height="100%"

borderStyle="solid"

4

backgroundColor="#ffffff"

dragEnter="dragEnterHandler(event);"

dragDrop="dragDropHandler(event);">

5

<mx:Button id="mybutton" label="Drag Button" mouseMove="mouseMoveHandler(event);"/>

</mx:Canvas>

6

</mx:Application>

Output:-

7

Ads