Flex 4 ( Flash Builder 4 ) DropDownList实现数据拖拽 -示例
发布时间：2020-12-15 01:39:34 所属栏目：百科 来源：网络整理
导读：? 下面是一段小Demo ，实现了数据从【容器1】（控件为List）拖入【容器2】（控件为DropDownList） ?其中相关属性在FB4中，鼠标移入都有相应的提示，在此不再多说，看代码： ?xml version="1.0" encoding="utf-8"? s:Application xmlns:fx="http://ns.adobe.c
|
?
下面是一段小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中提示
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |