1 Reply Latest reply on Jul 30, 2007 3:03 AM by Finty

    having a constant Y position for the drag proxy

      hi,

      is it possible to constrain the image used in the drag proxy to just one axis when it is being dragged?

      In other words, I'm trying to create a slider-type effect that slides along a numberline.

      the only form of control that i can see relating to positioning is 'yOffset':

      quote:

      public static function doDrag(dragInitiator:IUIComponent, dragSource:DragSource, mouseEvent:MouseEvent, dragImage:IFlexDisplayObject = null, xOffset:Number = 0, yOffset:Number = 0, imageAlpha:Number = 0.5, allowMove:Boolean = true):void


      any help is appreciated

      finty
        • 1. Re: having a constant Y position for the drag proxy
          Level 1

          this is how I've approached this (I adapted sample code from the documentation):

          (any recommendations are appreciated)

          <?xml version="1.0" ?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
          <mx:Script>
          <![CDATA[
          //Import classes so you don't have to use full names.
          import mx.managers.DragManager;
          import mx.core.DragSource;
          import mx.events.DragEvent;
          import flash.events.MouseEvent;
          import mx.controls.Image;
          import mx.containers.Canvas;
          import flash.events.Event;

          //Variables used to hold the image's location
          public var xOff:Number;
          public var yOff:Number;

          // Embed icon image.
          [Embed(source='assets/10c.png')]
          public var globeImage:Class;

          private var imageProxy:Image;
          // Drag initiator event handler, called by
          // the image's mouseMove event.
          private function dragMe(event:MouseEvent, img1:Image,format:String):void {
          var dragInitiator:Image=Image(event.currentTarget);
          var ds:DragSource = new DragSource();
          ds.addData(img1, format);
          // The drag manager uses the image as the drag proxy
          // and sets the alpha to 100 (opaque),
          // so it appears to be dragged across the canvas.
          imageProxy = new Image();
          imageProxy.source = globeImage;
          imageProxy.height=globeImage.height;
          imageProxy.width = globeImage.width
          imageProxy.addEventListener(Event.ENTER_FRAME, onEnterFrame);
          draggin = true;
          DragManager.doDrag(dragInitiator, ds, event, imageProxy, 0, 0, 1.00);
          }

          //Function called by the canvas dragEnter event; enables dropping
          private function doDragEnter(event:DragEvent):void {
          DragManager.acceptDragDrop(Canvas(event.target));
          draggin = false;
          imageProxy.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
          }

          // Function called by the canvas dragDrop event;
          // Sets the image object's position,
          // "dropping" it in its new location.
          private function doDragDrop(event:DragEvent, target1:Canvas, format:String):void {
          draggin = false;
          myimg.x = target1.mouseX - xOff
          // myimg.y = target1.mouseY - yOff
          }

          // Helper function called by the dragged image's mouseMove event,
          // as the image drags across the canvas.
          // The function updates the xOff and yOff variables to show the
          // current mouse location.
          private function myoffset(img:Image):void {
          xOff = img.mouseX
          yOff = img.mouseY
          }

          public var draggin:Boolean = false;

          public function onEnterFrame(event:Event):void{
          if(draggin == true){
          myimg.x = event.currentTarget.mouseX - v1.x - (myimg.width/2);
          }
          }
          ]]>
          </mx:Script>

          <!-- The Canvas is the drag target -->
          <mx:Canvas id="v1" width="500" height="500" dragEnter="doDragEnter(event)"
          dragDrop ="doDragDrop(event, v1, 'img')" borderStyle="solid"
          backgroundColor="#DDDDDD">
          <!-- The image is the drag initiator and the drag proxy. -->
          <mx:Image id="myimg" source="@Embed(source='assets/10c.png')"
          mouseMove="dragMe(event, myimg, 'img');myoffset(myimg);"/>
          </mx:Canvas>
          </mx:Application>