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




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




              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.
              // 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);


          <!-- 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"
                  width="30" height="30"
                  width="30" height="30"
          <mx:Button id="b1"
              label="Clear Canvas"
              click="myCanvas.setStyle('backgroundColor', '0xFFFFFF');"