Question

I’m getting up to speed with Flex and I am looking for any example of implementing a drag and drop re-sort within a vbox container. Basically I have a Vbox that contains a number of canvas’s that are full width and 35px high. I want to be able to drag and drop them to re-order within the vbox.

Any help is greatly appreciated – thanks,

b

Answer 1

Have you tried using a mx:List – drag and drop support is already built in and very easy to use – i threw together a sample for you using the dimensions you mentioned:

<?xml version='1.0' encoding='utf-8'?> <mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' layout='absolute' creationComplete='init()'>      <mx:Script>         <![CDATA[             import mx.controls.Alert;             import mx.events.DragEvent;             import mx.collections.ArrayCollection;              [Bindable]             private var _source:ArrayCollection = new ArrayCollection();              private function init():void{                  var n:int = 10;                 for(var i:int = 0; i < n; i++){ _source.addItem({value:Math.random()}); }              }              private function handleReorder(event:DragEvent):void{                  Alert.show('A change was made!');              }          ]]>     </mx:Script>      <mx:List dataProvider='{_source}' width='250' height='500' dragMoveEnabled='true'               dragEnabled='true' dropEnabled='true' dragDrop='handleReorder(event)'>         <mx:itemRenderer>             <mx:Component>                 <mx:Canvas width='100%' height='35'>                     <mx:Text text='{data.value}' width='100%' height='100%' selectable='false' />                 </mx:Canvas>             </mx:Component>         </mx:itemRenderer>     </mx:List>  </mx:Application> 

And there is of course more info here: http://livedocs.adobe.com/flex/3/langref/mx/controls/List.html

good luck!