如何在Flex Grid控件中實現拖放操作？

我有一個簡單的網格控件，帶有一些我想要移動的按鈕。下面的代碼確實有效，但實際上做了拖拽操作需要很多努力，並且不清楚拖放的發生位置。我必須將鼠標移到很多地方，才能進入拒絕放棄的狀態。我將不勝感激任何有關如何使這更「用戶友好」的建議。如何在Flex Grid控件中實現拖放操作？

 

<?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>

來源

2009-02-16 Bogdan