How can I drag and drop canvases within a Vbox to re-order?

Question

Hi, 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

If I were you, I'd first check the Flex documentation available online. There's this example. You will have to customize this for your list control's itemeditor. There's another example which you should take a look at. If you have a problem let us know.

Answer 2

There are several ways to do this, but I believe that most of the Y values of the VBox (or x values in the HBox) are handled through Z-order of the child objects. You might simply be able to call setChildDepth( child, zPosition );

As far as dragging and dropping, you would do best to use the DragManager class: DragManager.doDrag( myUIComponent, , parentObject) is a lot more consistent and a lot smoother than startDrag and stopDrag. However, it requires you to have objects which use EventListeners for different DragEvents. Then you will need to set the acceptDrag? property of the UIComponent as well as tell the DragManager what feedback it should give.

Answer 3

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!

Answer 4

Hi Willy,

Did you solved your problem.

If yes then please let me know how you did it.

Thanks Vasu

Answer 5

Hi WillyCornbread your code was very helpful for me because I need to add drag and drop functionality to a Form in which the user is able to reorder the form elements... But your code allows only one kind of elements fx images.

What if I need to add Buttons, TextArea and TextInput Controls etc. in the list and allow drag and drop support, what should I add to the code to make it work?

Please help me with this