sortable grid like jquery ui in adobe flex

问题

I need something like jQuery UI's Sortable in Adobe Flex. Is there a quick solution out there?

回答1:

Here is similar sortable grid(3X3) example in flex:

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

来源：https://stackoverflow.com/questions/27714451/sortable-grid-like-jquery-ui-in-adobe-flex