下面是一段小Demo ,实现了数据从【容器1】(控件为List)拖入【容器2】(控件为DropDownList)
其中相关属性在FB4中,鼠标移入都有相应的提示,在此不再多说,看代码:
<?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">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.controls.Alert;
//初始化拖拽目标
protected function drageIt(event:MouseEvent):void
{
// TODO Auto-generated method stub
var dragInit:List = event.currentTarget as List;
var dragSource:DragSource = new DragSource();
dragSource.addData(dragInit,"name");
//
Alert.show("abc","提示!!");
DragManager.doDrag(dragInit,dragSource,event);
}
//拖拽移入
protected function dragEnterHandler(event:DragEvent):void{
var dropTarget:DropDownList = event.currentTarget as DropDownList;
if(event.dragSource.hasFormat("name")){
DragManager.acceptDragDrop(dropTarget);
}
}
//执行拖拽
protected function dragdropHandler(event:DragEvent){
var name:List = List(event.dragSource.dataForFormat("name"));
// Alert.show(name.selectedItem.labelField,"提示!!");
if(null!=name.selectedItem ){
this.objs3.addItem(name.selectedItem.labelField);
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 执行拖拽时要确保所有参与控件的dataProvider是同类型,并且已经初始化!!!!!!!! -->
<s:ArrayList id="objs1" >
<fx:Object labelField ="LanDian" />
<fx:Object labelField ="OS"/>
<fx:Object labelField ="Micorosoft"/>
<fx:Object labelField ="航天器"/>
<fx:Object labelField ="流星"/>
<fx:Object labelField ="海王星"/>
<fx:Object labelField ="ENNA"/>
<fx:Object labelField ="PiaoLan"/>
<fx:Object labelField ="积雨云"/>
<fx:Object labelField ="第六感"/>
<fx:Object labelField ="雷雨"/>
<fx:Object labelField ="田园风光"/>
<fx:Object labelField ="北欧风情"/>
<fx:Object labelField ="南极洲"/>
<fx:Object labelField ="海洋"/>
<fx:Object labelField ="银河"/>
</s:ArrayList>
<s:ArrayList id="objs2" >
</s:ArrayList>
<s:ArrayList id="objs3" >
</s:ArrayList>
</fx:Declarations>
<s:Panel horizontalCenter="0" verticalCenter="0" width="316" height="383" title="拖拽演示:数据源--可拖入--容器1--可拖入---容器2">
<s:List x="10" y="30" id="sco" width="103" height="301" dataProvider="{objs1}" dragMoveEnabled="true" labelField="labelField" dragEnabled="true" dropEnabled="true"></s:List>
<s:Label x="10" y="10" text="选择拖拽源" width="85" fontSize="13" color="#0C73D3"/>
<s:List x="142" y="30" id="op" dataProvider="{objs2}" mouseMove="drageIt(event)" labelField="labelField" height="141" width="107" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true">
</s:List>
<s:Label x="145" y="10" text="容器1"/>
<s:Label x="145" y="184" text="容器2"/>
<s:DropDownList x="145" y="204" dataProvider="{objs3}" labelField="labelField" dragEnter="dragEnterHandler(event)" dragDrop="dragdropHandler(event)" ></s:DropDownList>
</s:Panel>
</s:Application>
注:FB4 本身许多控件已经集成拖拽属性,只需要开启下即可,如本例中 数据源 拖入 容器1。具体参见API或是FB4中提示