title: How to implement drag and drop in Flex Grid control?
body: <p>I have a simple Grid control with some buttons that I want to be able to move around. The code below does work, but it takes a lot of effort to actually do the drag&amp;drop and it is not clear where the drop will happen. I have to move the mouse around a lot to get to a state where the drop is not rejected. I would appreciate any suggestions on how to make this more "user friendly".</p>
  
  <pre>
  <code>
  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" height="200" width="200"&gt;
      &lt;mx:Script&gt;
          &lt;![CDATA[
  import mx.containers.GridItem;
  import mx.controls.Button;
  import mx.core.DragSource;
  import mx.events.*;
  import mx.managers.DragManager;
  
  private function dragInit(event:MouseEvent):void
  {
      if(event.buttonDown)
      {
          var button:Button = event.currentTarget as Button;
          var dragSource:DragSource = new DragSource();
          dragSource.addData(button, 'button');
          DragManager.doDrag(button, dragSource, event);
      }
  }
  
  private function dragEnter(event:DragEvent): void
  {
      var target:GridItem = event.currentTarget as GridItem;
      if (event.dragSource.hasFormat('button') && target.getChildren().length == 0)
      {
          DragManager.acceptDragDrop(target);
          DragManager.showFeedback(DragManager.MOVE);
      }
  }
  
  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);
  }           
          ]]&gt;
      &lt;/mx:Script&gt;
  
      &lt;mx:Grid&gt;
          &lt;mx:GridRow width="100%" height="100%"&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
                  &lt;mx:Button label="A" width="40" height="40" mouseMove="dragInit(event)"/&gt;
              &lt;/mx:GridItem&gt;
          &lt;/mx:GridRow&gt;
          &lt;mx:GridRow width="100%" height="100%"&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
                  &lt;mx:Button label="B" width="40" height="40" mouseMove="dragInit(event)"/&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
          &lt;/mx:GridRow&gt;
          &lt;mx:GridRow width="100%" height="100%"&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
                  &lt;mx:Button label="C" width="40" height="40" mouseMove="dragInit(event)"/&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)"&gt;
              &lt;/mx:GridItem&gt;
          &lt;/mx:GridRow&gt;
      &lt;/mx:Grid&gt;
      &lt;mx:Style&gt;
  GridItem
  {
      borderColor: #A09999;
      borderStyle: solid;
      borderThickness: 2;
      horizontal-align: center;
      vertical-align: center;
  }
  Grid
  {
      borderColor: #A09999;
      borderStyle: solid;
      borderThickness: 2;
      horizontalGap: 0;
      verticalGap: 0;
      horizontal-align: center;
      vertical-align: center;
  }
      &lt;/mx:Style&gt;
  &lt;/mx:Application&gt;
  
  
  </code>
  </pre>