2 Replies Latest reply on Oct 4, 2010 1:57 AM by ratnawe

    List-based components with drag-/dropEnabled=true cannot coexist with other draggable components

    ratnawe Level 1

      Hi Flexers,

       

      since I find it a bit difficult to describe the problem I'll try that after posting the code and a screenshot:

       

       


      <s:Application
           xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           width="100%" height="100%">
          
           <s:layout><s:HorizontalLayout/></s:layout>
          
           <fx:Script>
                <![CDATA[
                     import mx.core.IUIComponent;
                     import mx.core.IVisualElement;
                     import mx.events.DragEvent;
                     import mx.managers.DragManager;
                    
                     protected function draggableLabel_mouseDownHandler(event:MouseEvent):void {
                          DragManager.doDrag(event.currentTarget as IUIComponent,null,event);
                     }
                    
                     protected function leftGroup_dragEnterHandler(event:DragEvent):void {
                          DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
                     }
                    
                    
                     protected function leftGroup_dragDropHandler(event:DragEvent):void {
                          leftGroup.addElement(event.dragInitiator as IVisualElement);
                     }
                    
                ]]>
           </fx:Script>
          
          
           <s:List id="leftList"
                dragEnabled="true"
                dropEnabled="true"
                width="200" height="200">
                <s:ArrayCollection>
                     <fx:String>Item 1</fx:String>
                     <fx:String>Item 2</fx:String>
                     <fx:String>Item 3</fx:String>
                </s:ArrayCollection>
           </s:List>
          
           <s:List id="rightList"
                dragEnabled="true"
                dropEnabled="true"
                width="200" height="200">
                <s:ArrayCollection>
                     <fx:String>Item 4</fx:String>
                     <fx:String>Item 5</fx:String>
                     <fx:String>Item 6</fx:String>
                </s:ArrayCollection>
           </s:List>
          
           <s:Group id="leftGroup"
                dragEnter="leftGroup_dragEnterHandler(event)"
                dragDrop="leftGroup_dragDropHandler(event)"
                width="200" height="200">

                <s:Rect left="0" right="0" bottom="0" top="0">
                     <s:fill><s:SolidColor color="0x00FF00"/></s:fill>
                </s:Rect>

           </s:Group>
          
           <s:Group id="rightGroup"
                width="200" height="200">

                <s:Rect left="0" right="0" bottom="0" top="0">
                     <s:fill><s:SolidColor color="0xFF0000"/></s:fill>
                </s:Rect>

                <s:Label text="DRAG ME"
                               color="0x000000"
                               mouseDown="draggableLabel_mouseDownHandler(event)"
                               y="0"/>
                <s:Label text="DRAG ME"
                               color="0x000000"
                               mouseDown="draggableLabel_mouseDownHandler(event)"
                               y="40"/>
                <s:Label text="DRAG ME"
                               color="0x000000"
                               mouseDown="draggableLabel_mouseDownHandler(event)"
                               y="80"/>
              </s:Group>
          
      </s:Application>

       

      DragDrop.png

       

      I ran into a serious problem recently. I wanted to be able  to use the drag- and dropEnabled property of list controls and (on the  same canvas) use the self-implemented drag-and-drop functionality of  other components (in this case a combination of draggable labels that  can be dragged onto a Group component). I wanted the labels to be  allowed to be moved around the whole screen but only be dropped onto the Group (NOT the List) component. The items in the list components were  thought to be interchangeable between the lists through the dragEnabled and dropEnabled properties set to true. The problem is that  when I drag the labels from the groups over to the lists a #1009 null object reference  error is thrown because the list fails trying to calculate the drop index for the labels. I  know I could work around the problem by setting dropEnabled=false on the lists and  implement the drag-and-drop functionality by hand but I  hoped that the two drag-and-drop variants would coexist for the sake of flexibility.

       

      Any thoughts? Many thanks!

       

      Regards,

      Thilo

        • 1. Re: List-based components with drag-/dropEnabled=true cannot coexist with other draggable components
          Shongrunden Adobe Employee

          When you drop something onto a spark List you need to provide a non null dragSource in the "itemsByIndex" format, if you change your code to something like this it should work:

           

                      protected function draggableLabel_mouseDownHandler(event:MouseEvent):void {
                         
                          // make some data to pass to the List
                          var someData:Vector.<Object> = new Vector.<Object>();
                          someData.push("hello world");
                         
                          // List expects drag data with "itemsByIndex" format
                          var dragData:DragSource= new DragSource();
                          dragData.addData(someData, "itemsByIndex");
                         
                          DragManager.doDrag(event.currentTarget as IUIComponent,dragData,event);
                      }
          • 2. Re: List-based components with drag-/dropEnabled=true cannot coexist with other draggable components
            ratnawe Level 1

            Thank you, Mr. Shongrunden!

             

            So I will consider it good practise to use the dragSource parameter of the doDrag method even if I do not actually pass in real data. In a lot of examples it is set to null and that made me think that it's alright doing it the same way. But when working with a rather complex mix of drag sources and drag targets in interaction with the built-in dropEnabled and dragEnabled capabilities of some flex components it seems to be a good idea to use this parameter consequently.

             

            Kind regards,

            TR