2010-03-22 2 views
2

comment éviteriez-vous de faire glisser pour certains éléments de votre liste ou DataGrid?Flex - éviter de faire glisser pour certains éléments

Disons que j'avais une liste avec deux éléments: 'Tom' et 'Jerry'. Seul 'Tom' devrait être dragable, pas 'Jerry'.

Idéalement, j'avais une fonction 'isDragEnabled (item: Object): Boolean', qui est interrogée par la source de glissement.

Mes difficultés commencent par le fait que le gestionnaire d'événements « dragStart » a une valeur nulle pour la dragSource, donc dès le début, je trouve qu'il est difficile de savoir ce que le début de la traînée est d'environ ..

Merci d'avance! PS Il y a eu quelques discussions sur la prévention ou l'annulation d'une baisse, mais je n'ai pas beaucoup pensé à empêcher le démarrage par traînage, d'où cette question.

Répondre

1

Ok, il a obtenu, grâce Robusto, votre Conseil n ° 2 a été l'inspiration, mais je devais utiliser un écouteur de souris vers le bas - l'événement de sélection des feux trop tard.

Dans l'exemple ci-dessous, j'utilise le code de some other question.

Cet exemple vous permet de glisser que le premier élément de la liste ou DataGrid:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" minWidth="955" minHeight="600"> 

    <mx:List id="list" dataProvider="{['Tom','Jerry', 'Amy', 'Betty', 'Chris', 'Dean', 'Email', 'Floyd', 'Grant', 'Helen', 'Iris', 'Jack']}" minWidth="200" 
     mouseDown="onMouseDown(event)" 
     /> 

    <mx:DataGrid id="dg" dataProvider="{[{title:'Tom'},{title:'Jerry'}]}" minWidth="200" 
     mouseDown="onMouseDown(event)" 
    > 
     <mx:columns> 
      <mx:DataGridColumn dataField="title" /> 
     </mx:columns> 
    </mx:DataGrid> 

    <mx:Script> 
     <![CDATA[ 
      import mx.controls.listClasses.ListBase; 
      import mx.events.DragEvent; 


      protected function onMouseDown(event:MouseEvent):void 
      { 
       var listBaseComp:ListBase = ListBase(event.currentTarget); 
       var clickIndex:int = this.findClickedItemIndex(event.stageX, event.stageY, listBaseComp); 
       listBaseComp.dragEnabled = clickIndex == 0; 
      } 

      /** 
      * Returns a dataProvider item that displays at the given coords for the given dataGrid. 
      * Code provided by Stackoverflow user https://stackoverflow.com/users/165297/amarghosh, 
      * thanks a lot! 
      */ 
      protected function findClickedItemIndex(globalX:Number, globalY:Number, listComp:ListBase):int 
      { 
       var p1 : Point; 
       var p2 : Point; 
       var renderer : DisplayObject; 

       for(var i:int=0; i<listComp.dataProvider.length; i++) { 
        renderer = DisplayObject(listComp.indexToItemRenderer(i)); 
        if (!renderer) //item is not displayed (scroll to view it) 
         continue; 
        p1 = new Point(renderer.x, renderer.y); 
        p2 = new Point(renderer.width, renderer.height); 
        p1 = renderer.parent.localToGlobal(p1); 
        p2 = renderer.localToGlobal(p2); 
        if(globalX >= p1.x && globalX <= p2.x && globalY >= p1.y && globalY <= p2.y) 
         return i; 
       } 
       return -1; 
      } 

     ]]> 
    </mx:Script> 
</mx:Application> 
2

Vous pouvez faire deux choses:

  1. Vous pouvez désactiver éléments dans la liste qui ne sont pas draggable, sur la base d'une propriété sur l'objet de données de ce selectedItem. Cela leur faire apparaître visuellement handicapés, que vous ne voulez pas, vous pouvez également essayer ...

  2. Vous pouvez définir la propriété dragEnabled de la liste à « true » lorsque des éléments valides (en fonction des données du selectedItem objet) sont sélectionnés, et à "false" lorsque les éléments sont invalides.

+0

Bonnes options Robusto, avez-vous utilisé/testé l'un ou l'autre? 1 semble assez infaillible, mais visuellement agaçant. 2 semble que cela fonctionnerait, mais beaucoup de choses qui semblent fonctionner devraient ne pas fonctionner pour moi. – invertedSpear

+0

Je les ai utilisés tous les deux et ils travaillent pour mon entreprise. Notez que # 1 utilise la propriété disabledFunction de la liste, tandis que # 2 appelle un gestionnaire de l'événement dragDrop, qui vérifie si la ligne est valide pour faire glisser et si elle n'est pas valide appelle event.stopImmediatePropagation() et event.preventDefault() . – Robusto

3

Si ce que vous voulez est d'éviter de traîner de l'élément vous devez utiliser quelque chose comme ceci:

<fx:Script> 
    <![CDATA[ 
     private function onDragStart(event:DragEvent):void { 
     var selectedNode:Object = itemsList.selectedItem; 
     if (selectedNode is not a draggable item) { 
      event.stopImmediatePropagation(); 
     } 
    } 
    ]]> 
</fx:Script> 

<s:List id="itemsList" dragStart="onDragStart(event)"/> 

L'événement DragStart est distribué dès le début du drag, donc si vous arrêtez la propagation de l'événement, vous évitez que l'élément ne soit déplacé.

Questions connexes