Flex 中的拖放操作

根据拖放支持，Flex组件可以分为两类：增强型拖放功能组件和非增强型拖放功能组件。下面是基于列表的控件都支持增强型的拖拽功能..

DataGrid    PrintDataGrid    Tree   Menu   List   HorizontalList   TileList

 

1.      在两个DataGrid之间拖放只需要设置一下dragEnabled和dropEnabled属性即可。一个是拖拽初始器，另一个是目标。

2.      在 DataGrid和List之间拖放。

List控件上可以添加这样一个监听   dragDrop = “doDragDrop(event)”

doDragDrop(event:DragSource):void{

          event.dragSource.dataForFormat(“items”);

}

 

用不可以直接拖拽组件上实现拖放功能

   比如将一个 Label组件中的数值拖放到List组件中：

1.      首先为Label控件添加一个mouseDown函数，并调用一个dragIt()方法，

2.      为DragSource对象赋值，添加addData方法

3.      DragManager.doDrag(…);

4.      为List控件添加doDragEnter监听，

5.      为List控件添加doDragDrop监听

下面是该示例具体代码：

<?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 mx.collections.ArrayCollection;

           import mx.core.DragSource;

           import mx.core.IUIComponent;

           import mx.events.DragEvent;

           import mx.managers.DragManager;

          

           [Bindable]

           private var arrData:ArrayCollection = new ArrayCollection([{name:'老婆'}]);

          

           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 doDragEnter(event:DragEvent, format:String):void

           {

              if(event.dragSource.hasFormat(format)){

                  DragManager.acceptDragDrop(IUIComponent(event.target));

              }

           }

          

           private function doDragDrop(event:DragEvent, format:String):void{

              var myLabelData:Object = new Object();

              myLabelData = event.dragSource.dataForFormat(format);

              myList.dataProvider.addItem(myLabelData);

           }

       ]]>

    </fx:Script>

    <s:Panel title="想你老婆" x="281" y="71" height="324" width="465">

      <s:Label text="艳儿，我的宝贝" id="myLabel" mouseDown="dragIt(myLabel, myLabel.text, event, 'myFormat')" x="22" y="117"/>

       <s:List id="myList" x="267" y="13" width="140" height="236" dataProvider="{arrData}" labelField="name"

              dragEnter="doDragEnter(event, 'myFormat')" dragDrop="doDragDrop(event, 'myFormat')" />

    </s:Panel>

</s:Application>

 

界面效果：