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&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".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center" height="200" width="200">
    <mx:Script>
    	<![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);
}   		
    	]]>
    </mx:Script>

    <mx:Grid>
    	<mx:GridRow width="100%" height="100%">
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    			<mx:Button label="A" width="40" height="40" mouseMove="dragInit(event)"/>
    		</mx:GridItem>
    	</mx:GridRow>
    	<mx:GridRow width="100%" height="100%">
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    			<mx:Button label="B" width="40" height="40" mouseMove="dragInit(event)"/>
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    	</mx:GridRow>
    	<mx:GridRow width="100%" height="100%">
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    			<mx:Button label="C" width="40" height="40" mouseMove="dragInit(event)"/>
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    		<mx:GridItem width="44" height="44" dragEnter="dragEnter(event)" dragDrop="dragDrop(event)">
    		</mx:GridItem>
    	</mx:GridRow>
    </mx:Grid>
    <mx:Style>
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;
}
    </mx:Style>
</mx:Application>