我试图在as3中复制相同的,我已经使用一个普通的列表创建了它,我尽了最大的努力在FLEX中做它,但没有运气,我的整个应用程序是在Flex中,我所需要的是动画列表,而我拖动和沿着列表,我不知道从哪里开始,我已经尝试了很多事情,但我运气不好,所以迫切地要求人们通过堆栈溢出的帮助。任何帮助将不胜感激
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的可排序网格。
1条答案
按热度按时间o7jaxewo1#
希望这个例子能提供一个思路:
源代码:adobe flex中类似jquery ui的可排序网格。