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

 

下面是一段小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/