Animation et la liste de brassage tout en glisser dans actionscript

Question

J'essaie de reproduire la même chose en AS3, je l'ai créé en utilisant une liste normale, j'ai essayé de mon mieux pour le faire en FLEX, mais pas de chance, toute mon application est en flexion , tout ce dont j'ai besoin est d'animer la liste pendant que je glisse et déplace le long de la liste, je ne sais pas par où commencer, j'ai essayé beaucoup de choses, mais je n'ai pas de chance. Toute aide serait appréciée

Answer 1

espère que cet exemple fournira une idée de commencer par:

<?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> 

Source: sortable grid like jquery ui in adobe flex