2 Replies Latest reply on Apr 8, 2009 10:14 AM by firdosh

    TileList DragAndDrop Issue

    firdosh Level 1

      Issue1

      • In the TileList component if I have 8 items layed out in a 3 x 3 grid

       

      ---------------

      | X | X | X |

      ---------------

      | X | X | X |

      ---------------

      | X | X | E |

      ---------------

       

      X is a UIComponent

      E is a Empty space.

       

      and if I have dragEnabled , dropEnabled, dragMoveEnabled so that users can sort the items, I cannot swap row1 column2 with row1 column3. So basically I cannot swap any of the column3 (row end) buttons.

       

      Issue2

      • If I wanted a certain item in list not to be draggable is it possible using the TileList component ?.

       

       

      Is there a way to tweak / override the Dragging functionality?

       

       

       

       

       

      In the below example none of the button1 drag events get fired

       

      <mx:Script>
              <![CDATA[

                   private function onDrag():void
                  {
                      trace("drag here");

                  }

       

              ]]>

      </mx:Script>

       

       

      <mx:Application>

          <mx:TileList itemRenderer="mx.controls.Button"
                           rowHeight="100"
                           columnWidth="100"
                           dragMoveEnabled="true"
                           dragEnabled="true"
                           dropEnabled="true"
                           rowCount="3"
                           columnCount="3"
                           paddingLeft="5"
                           paddingRight="5"
                           width="400">
                  <mx:dataProvider>
                      <mx:Button label="BUTTON1" dragEnter="onDrag();" dragStart="onDrag();"/>
                      <mx:Button label="BUTTON2"/>
                      <mx:Button label="BUTTON3"/>
                      <mx:Button label="BUTTON4"/>
                      <mx:Button label="BUTTON5"/>
                      <mx:Button label="BUTTON6"/>
                      <mx:Button label="BUTTON7"/>
                      <mx:Button label="BUTTON8"/>
                  </mx:dataProvider>
              </mx:TileList>

      </mx:Application>

       

      Thank You,

      Firdosh

        • 1. Re: TileList DragAndDrop Issue
          thebouv

          Issue 1:  With your code, you can swap row 1 col 3 with row 1 col 2, but not the opposite.  So the end cols are swappable to the left, but you just can't drag after them.  So drag button 3 to the left of button 2 and it works.  You may already know that though.

           

          The reason is those items aren't actually in rows and columns exactly, what you have is a connected list of items that are just flowing in to appear in rows and columns.  When you drag to the right of the last "column", it is trying to place it at the end of the entire list (box 9).  Same thing happens when you have 9 boxes too.  When you drag 2 to the right, it goes to box 9.

           

          To get the result you want, you'd drag box 2 to the left of box 4 OR do as I say above and drag box 3 to the left of box 2.

           

          Hopefully that all makes sense.

           

          Issue 2:  Your events don't fire on Button 1 because the drag target is the TileList.  dragEnter and dragStart aren't happening on the button itself.

           

          I poked around a little bit to try and find a way to deny one of the buttons from moving, but with now luck.  However, to give you some direction, you can get to the current item being dragged around like this:

           

          Add dragDrop="dragDropHandler(event)" (or any of the other drag event actions, dragStart, etc) to your TileList.

           

          As an example dragDropHandler method, I used this to find which button was just dragged:

           

                    import mx.controls.Alert;
                    import mx.events.DragEvent;
          
                      private function dragDropHandler(event:DragEvent):void {
                          var myTL:TileList = event.dragInitiator as TileList;
                          Alert.show(myTL.selectedItem.label.toString());
                      }
          

           

          I tried just Alerting event.dragInitiator.selectedItem.label.toString(), but I couldn't, so I explicitly cast event.dragInitiator to TileList and it worked just fine.  I think there is a way to do that inline without the var:TileList but I don't recall at the moment.

           

          Maybe using something along those lines you can find out the button that just moved and move it back to it's original position, which makes it functionally unmovable.

           

          If I get some time later I'll give it another go and try just that.

          1 person found this helpful
          • 2. Re: TileList DragAndDrop Issue
            firdosh Level 1

            @thebouv

             

            Thanks for the answers

             

            Re: Issue1

            Thanks for the information but from a usablity point of view that does not seem right. User should be able to swap items both ways.

             

            Re:Issue 2

            Certain items in the list would be disabled so the user should not be able to move them at all.

             

            It seems like I would implement some custom drag and drop operations using the Tile container. Would you happen to know how to restrict a drag source to be restricted within its containers border. For example in the sample below the user should not be able to drag the button outside the TileList component.?

             

            Thanks again for your help.

             

            Cheers,

            Firdosh