Specify the drag indicator by using the DragManager

Home Tutorial Flex Flex4 Components Specify the drag indicator by using the DragManager

Specify the drag indicator by using the DragManager
Posted on: July 13, 2010 at 12:00 AM

In this example we must specify a size for the drag indicator.

Specify the drag indicator by using the DragManager :

In this example we must specify a size for the drag indicator. In this example we use a doDrag() method. The syntax of doDrag() method is following:

doDrag(dragInitiator:IUIComponent, dragSource:DragSource, mouseEvent:MouseEvent,
dragImage:IFlexDisplayObject = null, xOffset:Number = 0, yOffset:Number = 0,
imageAlpha:Number = 0.5, allowMove:Boolean = true):void

When we drag the image it changes the size and drop the image it resize.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import flash.events.MouseEvent;

import mx.core.DragSource;

import mx.events.DragEvent;

import mx.managers.DragManager;

[Embed(source='C:/work/bikrant/image/roseindia.gif')]

public var roseindiaImage:Class;

// initialize the drag and drop operation

private function mouseMoveHandler(event:MouseEvent):void

{

var dragInitiator:Image=Image(event.currentTarget);

var dragSource:DragSource = new DragSource();

dragSource.addData(dragInitiator, "image");

var image:Image= new Image();

image.source=roseindiaImage;

image.height=100;

image.width=85;

DragManager.doDrag(dragInitiator, dragSource,

event, image, -100, -85, 1.00);

}

private function dragEnterHandler(event:DragEvent):void {

if (event.dragSource.hasFormat("image"))

{

DragManager.acceptDragDrop(Panel(event.currentTarget));

}

private function dragDropHandler(event:DragEvent):void {

Image(event.dragInitiator).x =

Panel(event.currentTarget).mouseX;

Image(event.dragInitiator).y =

Panel(event.currentTarget).mouseY;

}

]]>

</fx:Script>

<s:Panel title="Specify the drag indicator by using the DragManager"

width="386"

height="282"

chromeColor="#555555"

color="#CCCCCC"

dragEnter="dragEnterHandler(event);"

dragDrop="dragDropHandler(event);">

<mx:Image id="image"

source="{roseindiaImage}"

mouseMove="mouseMoveHandler(event)"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Specify the drag indicator by using the DragManager:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics