Flex 拖拽范例 二

转载 2011年01月13日 11:32:00

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400" backgroundColor="#FFFFFF" creationComplete="initApp()" layout="absolute">
  <mx:Script>
    <![CDATA[
      import mx.controls.DataGrid;
      import mx.controls.Image;
      import mx.collections.ArrayCollection;
      import mx.events.DragEvent;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      [Bindable]
      public var total:Number=0;
      [Bindable]
      public var cartContents:ArrayCollection;
      private function initApp():void{
        this.cartContents=new ArrayCollection();
      }
      private function dragIt(event:MouseEvent,name:String,price:Number):void{
        //CurrentTarget指定要实现拖拽事件的初始化目标
        var dragInitiator:Image=event.currentTarget as Image;
        //指定一个dragSource来包括拖拽过程中包含的数据的对象
        var dragSource:DragSource=new DragSource();
        //向对象添加数据
        dragSource.addData(name,'name');
        dragSource.addData(price,'price');
        //创建一个拖拽对象的代理作为拷贝
        var dragProxy:Image=new Image();
        dragProxy.source=event.currentTarget.source;
        //使用DragManager静态方法doDrag开始拖拽
        DragManager.doDrag(dragInitiator,dragSource,event,dragProxy);
      }
      private function dragEnterHandler(event:DragEvent):void{
        var dropTarget:DataGrid=event.currentTarget as DataGrid;
        if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
          DragManager.acceptDragDrop(dropTarget);
        }
      }
      private function dragDropHandler(event:DragEvent):void{
        var name:String= String(event.dragSource.dataForFormat('name'));
        var price:Number=Number(event.dragSource.dataForFormat('price'));
        this.cartContents.addItem({name:String(event.dragSource.dataForFormat('name')),price:String(event.dragSource.dataForFormat('price'))});
        total+=price;
      }
    ]]>
  </mx:Script>
  <mx:Canvas x="19" y="10">
  <mx:Image x="23" y="35" width="64" height="64" mouseMove="dragIt(event,'Dreamweaver',499);" source="@Embed(source='../assets/056.png')"/>
  <mx:Label x="41" y="107" text="499"/>
  <mx:Image x="23" y="133" width="64" height="64" mouseMove="dragIt(event,'Fireworks',299);"  source="@Embed(source='../assets/057.png')"/>
  <mx:Label x="41" y="205" text="299"/>
  <mx:Image x="23" y="231" width="64" height="64" mouseMove="dragIt(event,'Flash',599);" source="@Embed(source='../assets/059.png')"/>
  <mx:Label x="41" y="303" text="599"/>
  </mx:Canvas>
  <mx:Label x="210" y="61" text="购物篮" fontSize="12"/>
  <mx:DataGrid x="129.5" y="102" id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" height="165" fontSize="12">
    <mx:columns>
      <mx:DataGridColumn headerText="产品" dataField="name"/>
      <mx:DataGridColumn headerText="价格" dataField="price"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Label x="186" y="292" text="总计:{total}" fontSize="12"/>
  <mx:Label x="129.5" y="0" text="拖拽物品放入购物篮中" fontSize="12"/>
  <mx:HRule x="5" y="20" width="390"/>
  
</mx:Application>

Flex 拖拽范例

  • janee81930
  • janee81930
  • 2009年05月15日 15:30
  • 767

Flex 拖拽范例 一

   
  • wzj_119
  • wzj_119
  • 2011年01月13日 11:32
  • 251

FLEX拖拽实现及介绍

Flex组件内置了处理拖拽事件的接口,有些控件已经实现了拖拽功能,比如List、DataGrid、Menu、 HorizontalList、 PrintDataGrid、TileList、Tre...
  • vincent50411
  • vincent50411
  • 2014年03月08日 19:49
  • 1057

flex支持拖拽的panel

这是一个支持拖拽的自定义Panel组件。 拖拽过程panel不能超出父容器边界。 ...
  • zhongyuan_1990
  • zhongyuan_1990
  • 2014年03月01日 17:06
  • 864

flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

Flex 中要想控制Tree组件内,节点的拖动位置,需要进行如下操作。 1. 要想真正限制树节点拖动位置,使用简单的拖动事件是不行的,需要重写Tree树组件类。 2. 然后重写Tree树组件的...
  • catherine0_0
  • catherine0_0
  • 2013年11月19日 14:46
  • 1141

Flex拖动实现方法

   在交互性要求较高的系统中,拖动是一种比较常用的技术,例如,我们经常用到权限定制、数据导入导出定制等功能,这种情况下,一般是目标数据集合已经确定,用户需要从已有的集合中选择条目,使用拖动完成实现起...
  • kiki1985
  • kiki1985
  • 2010年08月11日 08:57
  • 2451

Flex Panel 拖动效果例子

 2010-08-06 今天在flex下尝试了下panel拖动的效果,设置比较简单。具体看代码:...
  • HeadwayCS
  • HeadwayCS
  • 2010年08月06日 17:32
  • 3233

flex拖动技术汇总

Flex组件内置了处理拖拽事件的接口,有些控件已经实现了拖拽功能,比如List、DataGrid、Menu、 HorizontalList、 PrintDataGrid、TileList、T...
  • xingfeng0501
  • xingfeng0501
  • 2012年07月16日 10:01
  • 1833

flex 从tree和List的相互拖动问题

目前遇到一个很头疼的问题,flex中有一个属性叫做“dropEnabled”,根据官方文档的介绍,是指示被拖起来的项能否被放到该控件上的标志,那么该属性的使用方式就很明确了。...
  • liningzheng
  • liningzheng
  • 2015年12月31日 16:03
  • 501

控制flex窗口的拖动范围

如果弹出窗口TitleWindow不加以控制的话,可以将窗口拖到flash活动范围外,那样就无法正常关闭该窗口,因此将该窗口添加鼠标拖动事件,如下: //限制弹出窗口在flash的范围内 mo...
  • lpz283929516
  • lpz283929516
  • 2011年12月09日 17:13
  • 2218
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex 拖拽范例 二
举报原因:
原因补充:

(最多只允许输入30个字)