posts - 325,  comments - 25,  trackbacks - 0

拖放效果:
a) List组件有内置的拖放功能,只要设置dragEnabled="true",再在接受数据的List组件中设置dropEnabled="true"
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
  xmlns:mx="http://www.adobe.com/2006/mxml"
  width="450" height="350"
  creationComplete="initApp();"
  backgroundColor="#FFFFFF">
  <mx:Script>
    <![CDATA[
    // setup 3 dataProviders, 2 empty
    private function initApp():void{
      words.dataProvider = ['Water', 'Agua', 'Car', 'Coche', 'House', 'Casa', 'Book', 'Libro', 'Music', 'Música', 'Sandwich', 'Bocadillo'];       
      english.dataProvider = [];
      spanish.dataProvider = [];
    }
    ]]>
  </mx:Script>
  <mx:Panel title="Sort Words By Language" layout="absolute" x="0" y="0" width="450" height="350">
    <mx:Label text="Drag to the Correct Language" x="7" y="3"/>
    <mx:List id="words" width="200" height="275"
      allowMultipleSelection="true"               
      dragEnabled="true" y="25" x="7"/>
    <mx:Label text="English" y="6" x="223"/>
    <mx:List id="english" width="200" height="120"
      dropEnabled="true" y="25" x="223"/>
    <mx:Label text="Spanish" x="223" y="150"/>
    <mx:List id="spanish" width="200" height="120"
      dropEnabled="true" y="177" x="223"/>
  </mx:Panel>
</mx:Application>
b) 其它组件的拖放支持
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="300"
  creationComplete="initApp()" paddingLeft="0" paddingTop="0">
  <mx:Script>
    <![CDATA[
    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 {
      // The currentTarget specifies the component initiating the drag.
      var dragInitiator:Image = event.currentTarget as Image;
      // Create a new  DragSource object containing the data being dragged
      var dragSource:DragSource = new DragSource();
      // Add the data to the object.
      dragSource.addData(name, 'name');
      dragSource.addData(price, 'price');
      // Create a copy of the image to use as a drag proxy.
      var dragProxy:Image = new Image();
      dragProxy.source = event.currentTarget.source;
      // Call the DragManager doDrag() method to start the drag.
      DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
    }
    // Called if the user drags a drag proxy onto the drop target.
    private function dragEnterHandler(event:DragEvent):void {
      // Get the drop target component from the event object.
      var dropTarget:DataGrid=event.currentTarget as DataGrid;
      // Accept the drag only if the object contains the correct data
      if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
        // Accept the drop.
        DragManager.acceptDragDrop(dropTarget);
      }
    }
    // Called if used drops the object over the target and the target accepts the object
    private function dragDropHandler(event:DragEvent):void {
      // Set the data from the dragSource to local vars.
      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:Number(event.dragSource.dataForFormat('price'))});
      // Add the price to the total
      total += price;
    }
    ]]>
  </mx:Script>
  <mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF">
  <mx:Image source="yankee.jpg" mouseMove="dragIt(event, 'Yankee hat', 19.99);" x="23" y="35"/>
  <mx:Label text="$ 19.99"  x="53" y="215"/>
  <mx:Image source="mets.jpg" mouseMove="dragIt(event, 'Met hat', 19.99);" x="23" y="135"/>
  <mx:Label text="$ 19.99"  x="53" y="109"/>
  <mx:Label text="Shopping Cart"  x="226" y="28" fontWeight="bold"/>
  <mx:DataGrid id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" x="175" y="50" height="165">
    <mx:columns>
      <mx:DataGridColumn dataField="name" headerText="Name" />
      <mx:DataGridColumn dataField="price" headerText="Price" />
    </mx:columns>
  </mx:DataGrid>
  <mx:Label text="Total: $ {total}"  x="215" y="222"/>   
  <mx:Label x="93.5" y="2" text="Drag a product into the shopping cart"/>
  <mx:HRule x="5" y="20" width="390"/>
  </mx:Canvas>
</mx:Application>

posted on 2011-03-15 16:10 长春语林科技 阅读(212) 评论(0)  编辑  收藏 所属分类: flex

只有注册用户登录后才能发表评论。


网站导航:
 
<2011年3月>
272812345
6789101112
13141516171819
20212223242526
272829303112
3456789

 

长春语林科技欢迎您!

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

收藏夹

搜索

  •  

最新评论

阅读排行榜

评论排行榜