Flex drag-and-drop function implementation

Flex drag-and-drop function. The implementation of custom drag-and-drop function is described here.

It is mainly implemented by dragsource, dragmanager, and dragevent. The corresponding packages are MX. Core. dragsource, MX. Managers. dragmanager, MX. Events. dragevent,

If you drag component A to component B, the entire event process can be described as follows:
1. Click component A ---> 2.1 drag component A into the moment of component B, ---> 2.2 drag a to reach component B) ---> 3. Put the mouse down
The corresponding events mainly include:
1. mousedown (mounseevent) and dragstart (dragevent) mousedown act on component A. Here, you can use dragmanager to temporarily store dragsource (data related to component A) and proxy the dragged component, produce visual drag effect
-----> 2.1 dragenter (dragevent)
-----> 2.2 dragover (dragevent)
---> 3. dragdrop (dragevent), dragcomplete (dragevent)

 

 

 

The source code is as follows:

Mxml code:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application
Xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute"
Xmlns: My = "Ecolab. sgcl. Flex .*"
Creationcomplete = "Init ();">
<Mx: SCRIPT>
<! [CDATA [
Import Ecolab. sgcl. Flex. basicdataofuicomp;
Import Ecolab. sgcl. utils. search;
Import MX. Core. uicomponent;
Import MX. Core. dragsource;
Import MX. Managers. dragmanager;
Import flash. Events .*;
Import MX. Events. dragevent;

Private var COMP: uicomponent = new uicomponent ();
Private var line: SPRITE = new sprite ();
Private var GC: Graphics = line. graphics;
Private var linetmp: SPRITE = new sprite ();
Private var gctmp: Graphics = linetmp. graphics;
Private var arr: array = new array ();
Private var target: mbutton; // drag and drop to find the most matched component

Private function Init (): void {
Comp. Name = "linebase ";
Basecanvas. addchildat (COMP, 0 );
// Line: Line
This. drawline (btn2, btn3 );
This. drawline (btn3, btn4 );
}

Private function drawline (comp1: uicomponent, comp2: uicomponent): void
{
GC. linestyle (2, 0x00ffee, 50 );
GC. moveTo (comp1.x + comp1.width, comp1.y + comp1.height/2 );
GC. lineto (comp2.x, comp2.y + comp2.height/2 );

Comp. addchild (line );
}

Private function dodragenter (EVT: dragevent): void
{
If (EVT. dragsource. hasformat ("myds "))
{
Dragmanager. acceptdragdrop (basecanvas );
}
}

Private function dodragover (EVT: dragevent): void {
VaR dragbtn: mbutton = EVT. dragsource. dataforformat ("myds") as mbutton;
VaR RX: Int = EVT. dragsource. dataforformat ("relativex") as number;
VaR ry: Int = EVT. dragsource. dataforformat ("relativey") as number;

VaR OBJ: Object = {X: EVT. localx-Rx, Y: EVT. localy-ry, name: dragbtn. name };
VaR childarr: array = basecanvas. getchildren ();
VaR matchname: String = search. matchbyeuclidean (childarr, OBJ );
If (matchname = NULL)
Return;
Target = basecanvas. getchildbyname (matchname) as mbutton;
Gctmp. Clear ();
Gctmp. linestyle (2, 0xffff00, 50 );
Search. drawlinebyxy (target. X, target. Y, target. Width, target. height,
EVT. localx-Rx, EVT. localy-ry, dragbtn. Width, dragbtn. height,
Gctmp );
// Gctmp. moveTo (target. X, target. y );
// Gctmp. lineto (EVT. localx, EVT. localy );
Comp. addchild (linetmp );
}
Private function dodragdrop (Event: dragevent): void
{
Trace (event. dragsource );
Trace (event. currenttarget );
Trace(event.tar get );
VaR data: mbutton = event. dragsource. dataforformat ("myds") as mbutton;
VaR RX: Int = event. dragsource. dataforformat ("relativex") as number;
VaR ry: Int = event. dragsource. dataforformat ("relativey") as number;
Data. x = event. localx-Rx; // stagex
Data. Y = event. localy-ry;

Gctmp. Clear ();
// GC. Clear ();
GC. linestyle (1, 0x0099ff, 1 );
Search. drawlinebyxy (target. X, target. Y, target. Width, target. height,
Data. X, Data. Y, Data. Width, Data. height,
GC); // draw a line
}

]>
</MX: SCRIPT>
<Mx: canvas id = "basecanvas" x = "50" Y = "50" cornerradius = "0.5"
Backgroundcolor = "#336699" width = "500" Height = "600"
Dragenter = "dodragenter (event)" dragdrop = "dodragdrop (event )"
Dragover = "dodragover (event )"
>
<My: mbutton id = "btn1" label = "button1" x = "10" Y = "10" Height = "30" width = "100"/>
<My: mbutton id = "btn2" label = "button2" x = "10" Y = "110" Height = "40" width = "100"/>
<My: mbutton id = "btn3" label = "button3" x = "160" Y = "100" Height = "60" width = "100"/>
<My: mbutton id = "btn4" label = "button4" x = "320" Y = "105" Height = "50" width = "100"/>
</MX: canvas>
</MX: Application>

 

Actionscript3.0 class code:

Package Ecolab. sgcl. Flex
{
Import MX. Controls. Button;
Import flash. Events. mouseevent;
Import MX. Managers. dragmanager;
Import MX. Core. dragsource;

Public class mbutton extends button
{
Public Function mbutton ()
{
Super ();
This. addeventlistener (mouseevent. mouse_down, dodrag );
}

Private function dodrag (EVT: mouseevent): void {
VaR BTN: mbutton = EVT. currenttarget as mbutton;
VaR DS: dragsource = new dragsource ();
DS. adddata (BTN, "myds ");
DS. adddata (EVT. localx, "relativex"); // coordinates of the mouse relative to the target component
DS. adddata (EVT. localy, "relativey ");

VaR cpybtn: mbutton = new mbutton ();
Cpybtn. width = BTN. width;
Cpybtn. Height = BTN. height;
Cpybtn. Label = BTN. label;
Cpybtn. setstyle ("color", "# aa6633 ");
Dragmanager. dodrag (this, DS, EVT, cpybtn); // cpybtn is the proxy of the dragged component.
// Any visual control in FLEX can be used as a proxy.
}
}
}

 

The preceding environment:

Windowxp SP3

Eclipse3.2 + flex sdk3 + flexbuilder3.0 plugin + ie7.0