Comment implémenter glisser et déposer dans le contrôle Flex Grid?

Question

J'ai un contrôle de grille simple avec des boutons que je veux pouvoir déplacer. Le code ci-dessous fonctionne, mais il faut beaucoup d'efforts pour faire le glisser & et il n'est pas clair où la chute se produira. Je dois beaucoup déplacer la souris pour arriver à un état où la goutte n'est pas rejetée. J'apprécierais toutes les suggestions sur la façon de rendre cela plus "convivial".

 

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


 

Answer 1

Il semble que chaque élément de la grille vide n'existe que sur la bordure que vous avez définie (je ne sais pas pourquoi c'est le cas, c'est probablement une fonctionnalité connue des conteneurs). Si vous ajoutez un backgroundColor à chaque GridItem, alors DragEnter sera déclenché sur toute la zone plutôt que simplement sur cette bordure.

Answer 2

Malheureusement, vous devez gérer tous ces événements.

Answer 3

Définissez une couleur d'arrière-plan sur le composant Grid. Après cela, vous pouvez déposer les boutons au milieu d'un GridItem.

Answer 4

Il suffit de mettre backgroundColor dans votre GridItem :)