apache-flex 在actionscript中拖动时播放动画和随机播放列表

dohp0rv5  于 2022-11-01  发布在  Apache
关注(0)|答案(1)|浏览(160)

我试图在as3中复制相同的,我已经使用一个普通的列表创建了它,我尽了最大的努力在FLEX中做它,但没有运气,我的整个应用程序是在Flex中,我所需要的是动画列表,而我拖动和沿着列表,我不知道从哪里开始,我已经尝试了很多事情,但我运气不好,所以迫切地要求人们通过堆栈溢出的帮助。任何帮助将不胜感激

o7jaxewo

o7jaxewo1#

希望这个例子能提供一个思路:

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

源代码:adobe flex中类似jquery ui的可排序网格。

相关问题