Introduction to the drag and drop event in flex

Original article: Workshop.

For some controls such as DataGrid, horizontallist, list, menu, printdatagrid, tilelist, and tree, we can easily implement drag-and-drop effects by setting the control attributes dragenabled, dropenabled, and dragmoveenabled, however, when we are faced with components that are not based on the List Control (non-list-based ),
Or how can we make it support drag-and-drop events? Flex provides some classes and events for us to manually write events that support drag-and-drop operations.CodeYou can use dragmanager, dragsource, and dragevent to perform drag-and-drop operations.

Drag the initialization event (drag initiator events)
When we want to use a widget as a drag initiator, we can control the drag-and-drop operation through the mousedown, mousemove, and dragcomplete events.

Mousedown events and mousemove events)
The mouse lock event is triggered when you select a control and keep holding the mouse button.
The mouse movement event is triggered when you move the mouse.

In the following example, the image control is used to embed four images (images with 1 cent, 2 cent, 5 cent, and 10 cent coins ). for each image control, we define the mousemove event and define an event processing method dragit () to process the event. in the dragit () method, we get a reference pointing to the current coin image event, which refers to the currenttarget attribute of the event object. we save it as a local object and name it draginitiator.

Next we will create a dragsource instance, and create an adddata () method in it to obtain the value parameter passed by the dragit () method. This parameter will be used for processing the drop event in the future.

When we drag the target, we want to move the coin image with the mouse. We can create an image instance ), the source attribute of this instance refers to the image target that is being dragged. We save the newly created image instance as the local variable dragproxy.

Finally, we can start the drag operation by using the static method dodrag () in the dragmanager class, and then specifying the related drag initiator, Drag Source, and event object.

In this example, you can drag an image object to any place, but it cannot be placed because we have not specified any objects to be placed.

1 <? XML version = "1.0" encoding = "UTF-8" ?>
2 < MX: Application Xmlns: MX = "Http://www.adobe.com/2006/mxml"
3 Width = "500" Height = "160" >
4
5 < MX: script >
6 <! [CDATA [
7 Import MX. Controls. image;
8 Import MX. Managers. dragmanager;
9 Import MX. Core. dragsource;
10
11 [Embed ('Assets/1c.png ')]
12 [Bindable]
13 Public var onecent: class;
14
15 [Embed ('Assets/2c.png ')]
16 [Bindable]
17 Public var twocents: class;
18
19 [Embed ('Assets/5c.png ')]
20 [Bindable]
21 Public var fivecents: class;
22
23 [Embed ('Assets/10c.png ')]
24 [Bindable]
25 Public var tencents: class;
26
27 Private function dragit (Event: mouseevent, value: uint): void {
28 VaR draginitiator: Image = event.tar get as image;
29
30 VaR dragsource: dragsource = new dragsource ();
31 Dragsource. adddata (value, 'value ');
32
33 VaR dragproxy: Image = new image ();
34 Dragproxy. Source = event. currenttarget. source;
35
36 Dragmanager. dodrag (draginitiator, dragsource, event, dragproxy );
37 }
38 ]>
39 </ MX: script >
40
41 < MX: hbox >
42
43 < MX: Image
44 ID = "Onecent" Source = "{Onecent }"
45 Mousemove = "Dragit (event, 1 );"
46
47 />
48 < MX: Image
49 ID = "Twocents" Source = "{Twocents }"
50 Mousemove = "Dragit (event, 2 );"
51
52 />
53 < MX: Image
54 ID = "Fivecents" Source = "{Fivecents }"
55 Mousemove = "Dragit (event, 5 );"
56
57 />
58 < MX: Image
59 ID = "Tencents" Source = "{Tencents }"
60 Mousemove = "Dragit (Event, 10 );"
61
62 />
63 </ MX: hbox >
64
65 </ MX: Application >
66

If you want to practice it, just put four similar images under the assets of the Flex project. You can use them after naming them.