3 Replies Latest reply on Aug 19, 2010 1:32 AM by RonnieCR7

    Drag and Drop - detecting drop away from a component

    smon_ed Level 1

      Flex 4, AIR 2.0 app

       

      I have a drag and drop detecting a Button drag away from a Group1 into Group2.

       

      When the user drops into a Group2, the Button is added to it, which obviously removes it from Group1.

       

      I would like it that if the user drags away from Group2 and drops it randomly on the screen, the Button will be added back into Group1.

       

      Does anyone have any ideas as to how I might go about detecting the end of a drag when not over a component, so I can add the button back into Group1 again?

       

      Hope that makes sense!!!

        • 1. Re: Drag and Drop - detecting drop away from a component
          RonnieCR7 Level 1

          Hi smon,

          Define a Drag_Exit event listener for Group2, and in the event handler you could just specify the drop target as your group1.

           

          You can try this:

           

          group2.addEventListener(DragEvent.DRAG_EXIT, dragExit);

           

          public function dragExit(e:DragEvent):void

          {

           

          if (e.dragSource.hasFormat('button'))

          {

          DragManager.acceptDragDrop(group1);

          DragManager.showFeedback(DragManager.COPY);

          }

          }

           

          The "format" could be anything that you would have used to do the drag drop.

          • 2. Re: Drag and Drop - detecting drop away from a component
            smon_ed Level 1

            Thanks Ronnie,

             

            I'll have a look at gthis as it looks a bit more efficient than the solution I have come up with.

             

            The only thing I'm not sure about is at what point my Button gets put back into Group1.  In my current movie, I have a function which handles the dragDrop event.  But if I drop outside a component, I don't have an event from which I call the handleDrop(dragEvent) function.

             

            I'll have a look.

             

            In the meantime, what I'm doing is Making my drag item a custom component, passing a reference to it's default container (Group1) and its Default X and Y co-ordinates.

             

            Then, I have a dragComplete handler which is called whenever the drag item is released - I then check the action property of the event and if it is "none" I know it has been dropped outside a recognised target and I can add it back into its default group and set its default x and y coordinates.  This seems to work quite nicely at the moment.

             

            so, my code in the Drag Button looks like this:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Button xmlns:fx="
            http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"

                mouseDown="mouseDownHandler(event)"
                dragComplete="dragCompleteHandler(event)">

             


            <fx:Script>
              <![CDATA[  
               import mx.core.DragSource;
               import mx.core.IUIComponent;
               import mx.events.DragEvent;
               import mx.managers.DragManager;
              
               public var _defaultParent:Object;
               public var _defaultX:Number;
               public var _defaultY:Number;

             

              

               protected function mouseDownHandler(event:MouseEvent):void
               {
                // the drag initiator is the object being dragged (target of the mouse event)
                var dragInitiator:IUIComponent = event.currentTarget as IUIComponent;
               
                // the drag source contains data about what's being dragged
                var dragSource:DragSource = new DragSource();
               
                // ask the DragManger to begin the drag
                DragManager.doDrag( dragInitiator, dragSource, event, null );

               }
              


               protected function dragCompleteHandler(event:DragEvent):void
               {
                // TODO Auto-generated method stub
                //trace("Drag complete!");
                //trace("target = " + event.target);
                //trace("action = " + event.action);
                if (event.action != "none"){
                 trace("woo!");
                }else{
                 trace("put the drag label back into its original position");
                 if (event.target.parent != _defaultParent){
                  trace("put it back, you monster!");
                  _defaultParent.addElement(event.target);
                  event.target.x = _defaultX;
                  event.target.y = _defaultY;
                 }else{
                  trace("ah... it's already in the right place... actually!");
                 }
                }
               }

              ]]>
            </fx:Script>

            </s:Button>

            • 3. Re: Drag and Drop - detecting drop away from a component
              RonnieCR7 Level 1

              Hi Ed,

              Glad you found the solution. It looks good to me.