Flex using drag and drop

2010-09-05  来源:本站原创  分类:Web  人气:269 

All Flex components support drag and drop, some subset of the components also drag and drop with other functions, as these components can be achieved adding a property to drag and drop. Achieved in the Flex drag and drop in the use of drag and drop manager and provide the tools, as introduced drag and drop Manager:

Term Definition
Drag and drop the initial device Drag the component from the component or project
Drag source Drag data
Format Drag source attributes, whether to allow the release of an object to another object. Drag the data source associated with the format. The data type format string on simple
Drag handle Drag the process shown in the picture
Release of target Accept the release agent component drag

Drag and drop has three stages:
A, initialization
B, drag
C, release

According to drag and drop support, Flex components can be divided into two categories: enhanced drag and drop features enhanced drag and drop components and non-functional components The following is a list of controls to support the enhanced drag and drop:

DataGrid
PrintDataGrid
Tree
Menu
List
HorizontalList
TileList
For developers, when using drag and drop controls to achieve enhanced drag, the work will be very simple. In many cases, simply drag and drop the components involved in a property can be set.

See test case:

<?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"
                          >
        <s:layout>
                <s:BasicLayout/>
        </s:layout>
        <fx:Declarations>
                <!--  Add non-visual elements  ( For example, the value of the object services.  ) Here   -->
                <fx:XMLList xmlns="">
                        <mx:XMLList>
                                <employee>
                                        <name>Christina Coenraets</name>
                                        <phone>555-219-2270</phone>
                                        <email>[email protected]</email>
                                        <active>true</active>
                                </employee>
                                <employee>
                                        <name>Joanne Wall</name>
                                        <phone>555-219-2012</phone>
                                        <email>[email protected]</email>
                                        <active>true</active>
                                </employee>
                                <employee>
                                        <name>Maurice Smith</name>
                                        <phone>555-219-2012</phone>
                                        <email>[email protected]</email>
                                        <active>false</active>
                                </employee>
                                <employee>
                                        <name>Mary Jones</name>
                                        <phone>555-219-2000</phone>
                                        <email>[email protected]</email>
                                        <active>true</active>
                                </employee>
                        </mx:XMLList>

                </fx:XMLList>
        </fx:Declarations>

        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        import mx.core.DragSource;
                        import mx.core.IUIComponent;
                        import mx.events.DragEvent;
                        import mx.managers.DragManager;
                        [Bindable]
                        private var dataSource:ArrayCollection = new ArrayCollection([{name:"yao",age:23},
                                {name:"sun",age:18},{name:"tom",age:40}]);

                        [Bindable]
                        private var targetList:ArrayCollection = new ArrayCollection();
                        [Bindable]
                        private var myTargetList:ArrayCollection = new ArrayCollection();
                        private function init():void{
                                //targetDr.dataProvider = targetGridDs;
                        }

                        private function doDragDrop(event:DragEvent):void{
                                var dgRow:Object = new Object();
                                dgRow = event.dragSource.dataForFormat("items");
                                list.dataProvider.addItem(dgRow[0].name);
                                event.preventDefault();
                        }

                        private function  dragIt(initiator:Label,dsData:String,event:MouseEvent,format:String):void{
                                var ds:DragSource = new DragSource();
                                ds.addData(dsData,format);
                                DragManager.doDrag(initiator, ds, event);
                        }

                        private function dragEnter(event:DragEvent,format:String):void{
                                if(event.dragSource.hasFormat(format)){
                                        DragManager.acceptDragDrop(IUIComponent(event.target));
                                }
                        }

                        private function doDragDrop2(event:DragEvent,format:String):void{
                             var myLabelData:Object = new Object();
                                 myLabelData = event.dragSource.dataForFormat(format);
                                 mylist.dataProvider.addItem(myLabelData);
                        }
                ]]>
        </fx:Script>

        <mx:DataGrid x="102" y="111" dataProvider="{dataSource}" dragEnabled="true">
                <mx:columns>
                        <mx:DataGridColumn headerText=" First name  " dataField="name"/>
                        <mx:DataGridColumn headerText=" Age  " dataField="age"/>

                </mx:columns>
        </mx:DataGrid>
        <mx:Spacer height="50" width="100%"/>
        <mx:DataGrid x="110" y="289" dropEnabled="true"
                                >
                <mx:columns>
                        <mx:DataGridColumn headerText=" Column   1" dataField="name"/>
                        <mx:DataGridColumn headerText=" Column   2" dataField="age"/>
                        <mx:DataGridColumn headerText=" Column   3" dataField="col3"/>
                </mx:columns>
        </mx:DataGrid>
        <s:List x="339" y="111" dropEnabled="true" dataProvider="{targetList}"
                        dragDrop="doDragDrop(event)"><!--list If the dataProvider is re-initiated errors  -->
        </s:List>
        <s:Label x="457" y="97" text=" Drag-and-me  " name="myLabel"
                          mouseDown="dragIt(testLabel,'My data here',event,'myformat')"/>

        <s:List x="457" y="128" dragEnter="dragEnter(event,'myformat')"
                        dragDrop="doDragDrop2(event,'myformat')" dataProvider="{myTargetList}">
        </s:List>
</s:Application>

Above examples include three parts: drag and drop from dataGrid dataGrid, drag and drop from dataGrid list, drag and drop from the label to List

Note: After the two parts must explicitly initialize the release of target dataProvider, that is list in the control
dataProvider = "(targetList)" and dataProvider = "(myTargetList)">, otherwise it will report an empty object reference error.

-------------- ------------------ Drag related events
Drag and drop the initial event

Drag events Description
mouseDown and mouseMove DragEnabled components without the use of, MouseEvent class event is also used to start the drag and drop process. When the user mouse to select the control and press the mouse without letting go, the radio mouseDown event, move the ...
dragComplete events ...

Release of target event

Drag events Description
dragEnter When dragging from the unfavorable external agent to move above the target when the broadcast
dragOver In dragEnter incident, when the user mouse over the target at the top broadcast
dragDrop When the mouse is released over the target radio
dragExit Drag and drop to the target when the data did not release an external radio

------------ Importance of non-enhanced drag and drop classes ----------------
DragSource method of your own view class API

相关文章
  • Flex using drag and drop 2010-09-05

    All Flex components support drag and drop, some subset of the components also drag and drop with other functions, as these components can be achieved adding a property to drag and drop. Achieved in the Flex drag and drop in the use of drag and drop m

  • flex drag and drop operations (a) 2010-11-04

    Easier to make money at home Visual development environment, the biggest feature is an application that allows you the choice by the mouse, mobile and flexible to handle objects on the screen. Flex Drag and Drop Manager can select an object (such as

  • Flex 3 Getting Started (18): Building an advanced user interface, drag and drop support added 2010-08-26

    In a typical visual development environment, you can select in the application and drag an object moving back and forth on the screen. Flex Drag and Drop Manager allows users to select an object, such as an element of List control, or a control such

  • flex drag and drop operation (b) 2010-11-04

    Easier to make money at home Manually add the drag-and-drop support In the last article in Flex, you already know there are some controls built-in drag-and-drop operations support, and relatively easy to achieve, but often have to complete this opera

  • Flex's drag event Select Source Control List 2011-05-27

    Friends said he has two sets of procedures to do drag and drop each other's List, we all know that Flex drag and drop operation is very simple to achieve, just set in the List component dragEnabled = "true" dropEnabled = "true" two pro

  • [DnD] Swing Drag And Drop Analysis Notes 2010-04-23

    DnD (Drag And Drop) for the program's user friendliness is essential Common to a file directly dragged into the programs, and to drag item from one list to another list The most a few days learning Swing's DnD mechanism, has been a mess, a stunned bu

  • [Change] javascript Drag and Drop 2010-03-30

    <html> <head> <title> Drag-and-drop effect </title> <style> #idContainer{ border:10px solid #990000; width:600px; height:300px; } #idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; margin:50px; }

  • Eclipse drag and drop (Drag and Drop) (change) 2010-04-01

    Operating system is the most commonly used drag and drop movement of files to copy, drag and drop increased use of simple software. SWT also supports drag and drop, but more complicated programming. Figure 18.1 Schematic diagram of the realization of

  • 15 Jquery Drag and Drop plugin 2010-04-16

    15 jQuery drag the plug-in allows you to move up the page with the mouse! $. Event.special.drag To achieve a simple drag functionality and compatibility! (Mb) ConteinersPlus ConteinersPlus jQuery is a powerful drag and drop plug-in, drag can be achie

  • Based on jquery's Table Drag and Drop JQuery plugin 2010-04-26

    Prior to the completion of the up and down in the list can not meet the user's needs. Too much time on that list, a grid cell for the next lot of trouble. So look for this plug-in. Table Drag and Drop JQuery plugin Official website: http://www.isocra

  • WPF in RichTextBox support drag and drop the file 2010-07-22

    WPF in RichTextBox support drag and drop the file looks like not very friendly and spent a lot of his time, also attempted to get help through other channels, but no avail, has failed to achieve their goals, while depressed RichTextBox carefully read

  • Ruby on Rails process for the accession to drag and drop sorting 2010-07-27

    Ruby on Rails process for adding drag and drop sorting function ~ we can use sortable_element helper function ~ It can almost call the program by adding drag for automatically sorting the program will use acts_as_list plug-in, please first install ~

  • Clipboard and OLE Drag and Drop 2010-08-05

    First, the traditional clipboard Traditional form of the clipboard is very simple, the basic idea is to replicate when the replication process to the global memory copy of a data object, open the clipboard, and empty the clipboard data which will be

  • HTML5 drag and drop file upload 2010-08-08

    Through the HTML of the file API , Firefox, Chrome and other browsers already support drag and drop files directly from the operating system, and upload to the server. Compared to ten years using HTML forms, this is a revolutionary step forward. Alth

  • Free Drag and Drop Javascript Class 2010-09-13

    Basic Drag and Drop new Dragdrop (( target drag element HTMLElemnt Required bridge specify which elements of the mouse when pressing start dragging, modal dialog box is used to achieve dragable whether the drag (true) by default dragX true / false fa

  • js to achieve simple drag and drop 2010-09-25

    The simplest implementation of js said drag and drop drag and drop, and now major, medium and small sites are essentially similar things, especially for pop-up layer drag, it is common mess. . . In fact, for pop-up layer, the initial aim is very simp

  • Grid row drag and drop to change the order of 2010-10-08

    <script> var meta = [ {header:' No. ',dataIndex:'id', name: 'id'}, {header:' Name ',dataIndex:'name', name: 'name'}, {header:' Description ',dataIndex:'descn', name: 'descn'}, {header:' Date ',dataIndex:'date', name: 'date', type: 'date', dateFormat

  • Drag and drop sorting of TreeGrid SmartGWT 2010-10-29

    Use ListGrid, when the need sorting, of course, can be used for moving down this button to do sorting. However, since SmartGWT mouse Drag and Drop support for sorting, why not do it. First, setCanReorderRecords (true), drag the mouse in order to supp

  • Examples of drag and drop files Adobe Air 2010-11-27

    Authors stress that, in the AIR drag and drop operation to use to achieve the label is DragManager, the principle is largely achieved the following steps: 1. When you drag a file to AIR applications, AIR applications by listening NativeDragEvent.NATI

  • Js popup (supports drag and drop, multiple pop automatically switch level) 2011-01-09

    Js popup Usage: 1, first import the css and js <script type="text/javascript" src="js/PopUpManager-compressed.js" ></script> <link href="css/PopUpLayer.css" type="text/css" rel="stylesheet"/