拖动动作脚本时的动画和洗牌列表

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