0 Replies Latest reply on Apr 7, 2009 2:11 PM by firdosh

    Custom Drag And Drop

    firdosh Level 1

      Below is a example of simple drag and drop. What I would like to do is to restrict the user to move the  DragSource only within the bounds of the parent container. So in the below example i would like to restrict dragging within the (x,y, width,height) area of the Tile container. The user should not be able drag the DragSource outside the border of the Tile container , a example is the startDrag method which takes in 4 params as boundaries.

       

      Thank You

      Firdosh

       

       

      <?xml version="1.0"?>
      <!-- dragdrop\DandDCanvas.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          backgroundColor="white">

       

          <mx:Script>
              <![CDATA[

       

              import mx.core.DragSource;
              import mx.managers.DragManager;
              import mx.events.*;
              import mx.containers.Canvas;

       

              // Initializes the drag and drop operation.
              private function mouseMoveHandler(event:MouseEvent):void {
                 
                  // Get the drag initiator component from the event object.
                  var dragInitiator:Canvas=Canvas(event.currentTarget);
                 
                  // Get the color of the drag initiator component.
                  var dragColor:int = dragInitiator.getStyle('backgroundColor');

       

                  // Create a DragSource object.
                  var ds:DragSource = new DragSource();

       

                  // Add the data to the object.
                  ds.addData(dragColor, 'color');

       

                  // Call the DragManager doDrag() method to start the drag.
                  DragManager.doDrag(dragInitiator, ds, event);
              }

       

              // Called when the user moves the drag proxy onto the drop target.
              private function dragEnterHandler(event:DragEvent):void {

       

                  // Accept the drag only if the user is dragging data
                  // identified by the 'color' format value.
                  if (event.dragSource.hasFormat('color')) {

       

                      // Get the drop target component from the event object.
                      var dropTarget:Tile=Tile(event.currentTarget);
                      // Accept the drop.
                      DragManager.acceptDragDrop(dropTarget);
                  }
              }
                     
              // Called if the target accepts the dragged object and the user
              // releases the mouse button while over the Canvas container.
              private function dragDropHandler(event:DragEvent):void {

       

                  // Get the data identified by the color format
                  // from the drag source.
                  var data:Object = event.dragSource.dataForFormat('color');
                  // Set the canvas color.
                  myCanvas.setStyle("backgroundColor", data);
              }   
              ]]>
          </mx:Script>

       

          <!-- A horizontal box with red and green canvases that the user can drag. -->
          <mx:Label text="Drag a color onto the Canvas container."/>

       

          <!-- Handles dragEnter and dragDrop events to allow dropping. -->
          <mx:Tile id="myCanvas"
              width="100" height="100"
              backgroundColor="#FFFFFF"
              borderStyle="solid"
              dragEnter="dragEnterHandler(event);"
              dragDrop="dragDropHandler(event);">
             
               <mx:Canvas
                  width="30" height="30"
                  backgroundColor="red"
                  borderStyle="solid"
                  mouseMove="mouseMoveHandler(event);"/>
              <mx:Canvas
                  width="30" height="30"
                  backgroundColor="green"
                  borderStyle="solid"
                  mouseMove="mouseMoveHandler(event);"/>
             
          </mx:Tile>
             
          <mx:Button id="b1"
              label="Clear Canvas"
              click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"
          />       
      </mx:Application>