Re-arrange objects in a VGroup by Drag&Drop (Flex Spark)

Adding drag and drop support for Group components, as well as swapping of children or reorder.
This might seem like a straightforward issue and an easy solution, but as I found out… only list based views have the ability to re-arrange their children via dragging and droping. But there is one hidden gem, all the Group based components have build-in support for drag and drop operations, and whilst the user cannot enable directly the dropEnabled option (which allows the re-arrange like operation), it is fairly easy to create a custom functionality to imitate it.

So here we go. We have a VGroup with some children inside.

<s:VGroup id="mainParent" top="100" gap="5" horizontalCenter="0" dragEnter="dragEnterHandler(event);"
  <s:Button id="button1" label="Button1" height="20"/>
  <s:Button id="button2" label="Button2" height="20"/>

We will see what these functions (dragEnterHandler, dragDropHandler) do later on.

Now what we need to do is link some eventListeners to these children and the parent:
So we create the handler for the mouse move

function init()

And the appropriate function:

private function mouseDownHandler(e)

And now its time to set the function that handles the mouse movement and starts the dragging of the component:

private function mouseMoveHandler(event:MouseEvent):void {
  // Get the drag initiator component from the event object.
  var dragInitiator:Button = Button(event.currentTarget);
  var dragItem = dragInitiator;
  // Create a DragSource object.
  var ds:DragSource = new DragSource();
  // Add the data to the object.
  ds.addData(dragItem, 'item');
  // Call the DragManager doDrag() method to start the drag.
  DragManager.doDrag(dragInitiator, ds, event);

Now that we listen to the mouse move and mouse down, its time to create some dragging functions, since we previously added the listeners to the MXML (this might not be the best way, it is however quite fast)

// Called when the user moves the drag indicator onto the drop target.
newSlidePos = 0;
function dragEnterHandler(event:DragEvent):void {
  //Accept the drag only if the user is dragging data
  if (event.dragSource.hasFormat('item')) {
  if(event.localY < mainParent.measuredHeight/mainParent.numElements)
    newSlidePos = 0;
    newSlidePos = Math.floor(event.localY / (mainParent.measuredHeight/mainParent.numElements));
  //Get the drop target component from the event object.
  var dropTarget = VGroup(event.currentTarget);
  //Accept the drop.
// Called if the target accepts the dragged object and the user
// releases the mouse button while over the Canvas container.
private function dragDropHandler(event:DragEvent):void {
  // from the drag source.
  var data = event.dragSource.dataForFormat('item');
  newSlidePos = 0;

So what we do here is accept the drop from the target onto the parent and check if the position of the mouse is less than the total height of the parent and if it is the NEW position of the object is determined from the position of the mouse. For example as in our code each of the buttons have a height of 20 pixels so the total height of the parent (since it is not explicitly defined) is 40 pixels, knowing that if the mouse drags the component below 21 pixels it means it will be moved to position 2, and if it drags in a position less than 20 pixels the component will be dropped at position 1.

I hope all of that made sense, I think its a neat way to add re-arrange support for VGroup components (I like them better than lists… there Adobe I said it… I dislike itemRenderers… ).

Here is an example of this technique:

Bookmark the permalink.

6 Responses to Re-arrange objects in a VGroup by Drag&Drop (Flex Spark)

  1. Gokul says:

    Thank you

  2. Sandy says:

    Thanks !! Helped me my work..

  3. Madhusudhan says:

    Thank you very much.

  4. Greeshma says:

    How can I drag and dropping components within in a border container?

  5. @Greeshma this is beyond the scope of this tutorial I’m afraid. But what do you mean by border container is this a Flex component or custom one?

  6. Greeshma says:

    This is a flex Component.Dynamically we will add components for creating forms in this

Leave a Reply

Your email address will not be published. Required fields are marked *