Drag and Drop - detecting drop away from a component

Question

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

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