views:

33

answers:

2

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>
A: 

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

Eugene
I know how to drag and drop, the problem is when i drop a textInput(dragInitiator) near the border of the borderContainer, the textInput goes out of the borderContainer
john
asking you second time to show your code and try to use Group with BasicLayout instead, lets see what will be happened.
Eugene
A: 

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.

David