在動作拖動動畫和混洗列表

Question

我想在as3中複製相同的東西，我用普通列表創建了它，我盡我最大努力在FLEX中完成它，但沒有運氣，我的整個應用程序都在flex ，我所需要的只是當我拖動列表的同時動畫列表，我不知道從哪裏開始，我已經嘗試了很多東西，但運氣不好，因此迫切希望通過堆棧溢出來請求幫助。任何幫助，將不勝感激

Answer 1

希望這個例子提供了一個主意，開始與：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalAlign="middle" horizontalAlign="center" 
      height="100%" width="100%"> 
<mx:Script> 
<![CDATA[ 
    import mx.containers.GridItem; 
    import mx.controls.Button; 
    import mx.core.DragSource; 
    import mx.events.*; 
    import mx.managers.DragManager; 
    private var sourceRow:int; 
    private var sourceCol:int; 
    private var destinationRow:int; 
    private var destinationCol:int; 
    private var sourceIndex:int; 
    private var destinationIndex:int; 
    private const COLUMN_SIZE:Number = 1; 

    private function dragInit(event:MouseEvent):void 
    { 
     if(event.buttonDown && !DragManager.isDragging) 
     { 
      var button:Button = event.currentTarget as Button; 
      var dragSource:DragSource = new DragSource(); 
      dragSource.addData(button, 'button'); 
      DragManager.doDrag(button, dragSource, event); 
      sourceRow = (event.currentTarget.parent.parent.parent as Grid).getChildIndex(event.currentTarget.parent.parent); 
      sourceCol = (event.currentTarget.parent.parent as GridRow).getChildIndex(event.currentTarget.parent); 
      sourceIndex = sourceRow * COLUMN_SIZE + sourceCol; 
     } 
    } 

    private function dragEnter(event:DragEvent): void 
    { 
     var target:GridItem = event.currentTarget as GridItem; 
     if (event.dragSource.hasFormat('button')) 
     { 
      DragManager.acceptDragDrop(target); 
      DragManager.showFeedback(DragManager.MOVE); 
      trace("Drag Enter...."); 
      destinationRow = (target.parent.parent as Grid).getChildIndex(target.parent); 
      destinationCol = (target.parent as GridRow).getChildIndex(target); 
      destinationIndex = destinationRow * COLUMN_SIZE + destinationCol; 
     } 
     if(destinationIndex > sourceIndex) 
     { 
      var targetGridItem:GridItem = new GridItem(); 
      for(var i = sourceIndex; i< destinationIndex; i++) 
      { 
       targetGridItem = getGridItemByIndex(i); 
       targetGridItem.addChildAt(getGridItemByIndex(i+1).getChildAt(0),0); 
      } 
     } 
     else if(destinationIndex < sourceIndex) 
     { 
      var targetGridItem:GridItem = new GridItem(); 
      for(var i = sourceIndex; i > destinationIndex; i--) 
      { 
       targetGridItem = getGridItemByIndex(i); 
       targetGridItem.addChildAt(getGridItemByIndex(i-1).getChildAt(0),0); 
      } 
     } 
     sourceIndex = destinationIndex; 
    } 
    private function getGridItemByIndex(i:int):GridItem 
    { 
     var row:int = i/COLUMN_SIZE; 
     var col:int = i%COLUMN_SIZE; 
     return (grid.getChildAt(row) as GridRow).getChildAt(col) as GridItem; 
    } 

    private function dragDrop(event:DragEvent): void 
    { 
     var target:GridItem = event.currentTarget as GridItem; 
     var button:Button = event.dragSource.dataForFormat('button') as Button; 
     target.addChild(button); 
    } 
    ]]> 
</mx:Script> 

<mx:Grid id="grid" > 
    <mx:GridRow width="100%" height="100%"> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        backgroundColor="black" verticalAlign="middle" paddingLeft="4" 
        verticalScrollPolicy="off" horizontalScrollPolicy="off"> 
      <mx:Button label="A" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 

    </mx:GridRow> 
    <mx:GridRow width="100%" height="100%"> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="blue" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="D" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 

    </mx:GridRow> 
    <mx:GridRow width="100%" height="100%"> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="green" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="G" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 

    </mx:GridRow> 
    <mx:GridRow width="100%" height="100%"> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="green" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="J" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 

    </mx:GridRow> 
</mx:Grid> 
</mx:Application> 

來源：sortable grid like jquery ui in adobe flex