首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex4_兑现拖放

2013-01-07 
Flex4_实现拖放拖放操作3步骤:1.源的初始化2.拖拽3.释放每步都会触发一个事件,通过事件监听实现数据的传递

Flex4_实现拖放
拖放操作3步骤:
  1.源的初始化
  2.拖拽
  3.释放
每步都会触发一个事件,通过事件监听实现数据的传递!
也就是,点击源的时候,获取到数据,当进入到释放目的地的时候,触发一个函数执行,从event中获取数据,将数据填充到目的地中!

要实现拖与放,必须设置两个最基本的属性:
  被拖拽的组件设置:dragEnable="true"
  目的组件设置:dropEnable="true"

1.相同组件之间的拖放,不需要额外定义ArrayCollection存放数据,将使用同名属性进行数据填充。
2.不同组件之间的拖放,不能使用"默认释放行为",因为组件不同,程序不知道该将如何处理数据,只好放一个Object对象到目标组件上!这不是我们想要的结果!
    在目标组件上定义dragDrop事件,并生成一个监听DragEvent事件的方法。
    在方法内部:
               var dgRow:Object = event.dragSource.dataForFormat("items");
    某行的数据将被全部放到dgRow中存放起来。
    注:如果要实现一次拖拽多行数据,只需设置DataGrid的allowMultipleSelection="true"
3.定义一个ArrayCollection用来存放将被放置进入的对象的某些属性
    [Bindable]
    private var targetListDP:ArrayCollection=new ArrayCollection();
    然后目标DataGrid中设置dataProvider="{targetListDP}"
    这样做的目的是:在事件监听处理函数中,向这个collection中放入我们自己指定的数据!在方法中:通过DataGrip定义的id(可看做一个对象)调用到其dataProvider属性,然后
addItem(dgRow[0].name),这里只是将dgRow中的name属性的值取出,同样可以取其它值,只需要改变属性名称即可!
4.最后,某些时候虽然自定义了拖放时数据的放置规则,但程序仍然会将默认的数据放置到目的地,这时,可以在事件处理方法中:event.preventDefault();
--------------------------------------------
非增强型组件(程序中默认不具备拖拽功能的组件)的拖放
5步:
1.在拖拽源上定义mouseDown事件
2.在事件处理函数至少定义4个形式参数准备接收数据:
  initiator:Label,//描述源
  dsData:String,//描述数据
  event:MouseEvent,//描述事件
  format:String//描述格式
3.新建一个DragSource对象:var ds:DragSource = new DragSource();
  将数据和格式放入到对象中:ds.addData(dsData,format);
  开启拖拽功能:DragManager.doDrag(initiator as IUIComponent,ds,event);
4.到此,源已经可以拖动了,数据也被放置到了DataSource对象中保存起来了
  下面就需要对目标进行操作了
  目标上设置dragEnter事件,事件处理函数中判断格式是否匹配
  如果匹配,则接收释放,否则不做任何处理
if(event.dragSource.dataForFormat(format))
DragManager.acceptDragDrop(event.target as IUIComponent);
5.到此,目标可以接收拖放,但是目标并为处理数据
  处理DataSource对象中存放的数据
  目标上定义dragDrop事件
  事件处理函数中,根据指定的format从DragSource中获取数据,
  设置到目标的dataProvider中,实现将数据填充到目标上
  var myLabelData:Object = event.dragSource.dataForFormat(format);
  myList.dataProvider.addItem(myLabelData); 
6.到此,实现非增强型组件的拖拽和目标正确显示数据
--------------------------------------------
源码
说明:将Label拖拽到List中,并在List中呈现数据


--------------------------------------------
实现图片的拖拽
1.图片上定义mouseDown事件,将数据放入DragSource对象中
2.在目标上定义DragEnter事件,根据format判断是否允许进入
3.在目标上定义DragDrop事件,通过format从DragSource对象中获取数据

protected function img_mouseDownHandler(event:MouseEvent,format:String):void{// 图片上发生mouseDown时,将相关数据放入DragSource对象中,最后开启拖拽var dragSource:DragSource = new DragSource();dragSource.addData(product,format);//拖拽图片到目标,但是拖拽过程中没有图片副本显示//DragManager.doDrag(event.currentTarget as IUIComponent,dragSource,event);var proxy:BitmapImage = new BitmapImage();proxy.source = img.content;//格式不正确,不能直接接受proxy,需要转换为IFlexDisplayObject//DragManager.doDrag(event.currentTarget as IUIComponent,dragSource,event,proxy);var imageHolder:Group = new Group();imageHolder.addElement(proxy);//各项数据准备好之后,开启图片的拖拽功能DragManager.doDrag(event.currentTarget as IUIComponent,dragSource,event,imageHolder);}protected function cartList_dragEnterHandler(event:DragEvent,format:String):void{// 图片进入时,发生dragEnter事件,在此检查格式是否匹配if(event.dragSource.dataForFormat(format))DragManager.acceptDragDrop(event.target as IUIComponent);//接收释放}protected function cartList_dragDropHandler(event:DragEvent,format:String):void{// 拖拽操作被释放时,接收数据var product:Product = event.dragSource.dataForFormat(format) as Product;//根据format到DragSource对象中取对应的数据var shoppingCartItem:ShoppingCartItem = new ShoppingCartItem(product);//放入对应的商品中shoppingCart.addItem(shoppingCartItem);//放入购物车}





热点排行