Flex 4 ( Flash Builder 4 ) DropDownList实现数据拖拽 -示例

    技术2022-05-20  43

     

    下面是一段小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中提示 转自: http://blog.163.com/ltzx012@126/blog/static/872430842010523258882/

     


    最新回复(0)