adobe flex中的jquery ui可排序的网格

Question

我需要Adobe Flex中的jQuery UI's Sortable之类的东西。那里有快速解决方案吗？

Answer 1

以下是在柔性类似栅格排序（3X3）例如：

<?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 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 * 3 + 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 * 3 + 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/3; 
     var col:int = i%3; 
     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:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
         verticalScrollPolicy="off" horizontalScrollPolicy="off" 
        backgroundColor="red" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="B" width="80" height="80" mouseMove="dragInit(event)" /> 
     </mx:GridItem> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        verticalScrollPolicy="off" horizontalScrollPolicy="off" 
        backgroundColor="yellow" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="C" 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:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="0xee82ee" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="E" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="purple" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="F" 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:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="0x87ceeb" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="H" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 
     <mx:GridItem width="88" height="88" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        backgroundColor="navy" paddingLeft="4" verticalAlign="middle"> 
      <mx:Button label="I" width="80" height="80" mouseMove="dragInit(event)"/> 
     </mx:GridItem> 
    </mx:GridRow> 
</mx:Grid> 
</mx:Application>