Component goes out of another component

Question

Hello,

If I drag a textInput from a component and drop it near the end of the another component, the textInput goes outside of the dropZone.

Any ideas how to resolve this problem?

thanks

edit:

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="150" height="500" xmlns:components="components.*" >

        protected function textInput_mouseDownHandler(event:MouseEvent):void
      {

      var dragI:Label=event.currentTarget as Label;
      var ds:DragSource=new DragSource();
      ds.addData(dragI,"TextInput");
      DragManager.doDrag(dragI,ds,event);
      }
 <s:BorderContainer width="100%" height="100%">
    <s:layout>
      <s:VerticalLayout gap="10"/>
    </s:layout>  
<s:Label text="TextInput"   mouseMove="textInput_mouseDownHandler(event )" dragComplete="dragCompleteHandler(event)" />

 </s:BorderContainer>

and the dropZone componenent:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" height="500" width="700" xmlns:components="components.*" >
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>

 protected function dragDropHandler(event:DragEvent):void
      {

        if (event.dragSource.hasFormat("TextInput")){

          var draggedText:TextInput=new TextInput();
          draggedText.x = event.currentTarget.mouseX;
          draggedText.y = event.currentTarget.mouseY;
          event.currentTarget.addElement(draggedText);
}
}
   protected function dragEnterHandler(event:DragEvent):void
      {
        if(event.dragSource.hasFormat("TextInput")  )
        {
          var dropTarget:BorderContainer= event.currentTarget as BorderContainer;
          DragManager.acceptDragDrop(dropTarget);   
}
}

 <s:BorderContainer width="100%" height="100%" dragDrop="dragDropHandler(event)"
                     dragEnter="dragEnterHandler(event)"/>
</s:Group>

Answer 1

http://flexonblog.wordpress.com/2009/03/02/drag-and-drop-from-list-control-to-textinputnon-list-control-control-in-flex/

http://saturnboy.com/2009/08/drag-and-drop-flex-4/

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64595-7fff.html

Answer 2

On your layout object, set clipAndEnableScrolling to true. This will cause the layout to clip all content that is ouside the bounds of the containter. If you need to scroll, then you still need to wrap your group in a scroller.

<s:BorderContainer width="100%" height="100%"> 
    <s:layout> 
      <s:VerticalLayout gap="10" clipAndEnableScrolling="true"/> 
    </s:layout>   
<s:Label text="TextInput"   mouseMove="textInput_mouseDownHandler(event )" dragComplete="dragCompleteHandler(event)" /> 

 </s:BorderContainer> 

clipAndEnableScrolling is a property on all the layouts, VerticalLayout, HorizontalLayout, and BasicLayout to name a few.