2 Replies Latest reply on Sep 19, 2007 10:24 PM by tnylsej

    Drag and Drop class

    tnylsej Level 1
      Hi, I attempted to write an actionscript class that drags and drops an image (i.e. panning an image). But it doesn't work.

      I'm new to actionscript, any help is very much appreciated. ^^

      The following are my codes:

      //scaling_component.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HDividedBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">
      <mx:Script>
      <![CDATA[
      import actionscripts.DragDrop;

      [Bindable]
      [Embed(source="/images/map.jpg")]
      public var map:Class;

      public function onDragDrop():Number {
      var dragDropObj:DragDrop = new DragDrop(targetMap.x as Number, targetMap.y as Number);
      targetMap.x = dragDropObj.getImageX();
      targetMap.y = dragDropObj.getImageY();
      }
      ]]>
      </mx:Script>

      <mx:Canvas id="scaling" width="75%" height="100%">
      <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
      <mx:Box id="mapContainer" width="500" height="500" horizontalAlign="center" verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off" dragEnter="doDragEnter(event);" dragDrop="doDragDrop(event);">
      <mx:Image source="{map}" id="targetMap" scaleContent="true" mouseDown="mouseMoveHandler(event);" creationComplete="onDragDrop()" />
      </mx:Box>
      </mx:VBox>
      </mx:Canvas>
      <mx:Canvas width="25%" height="100%" styleName="sideBar">
      <mx:Label text="test test" />
      </mx:Canvas>

      </mx:HDividedBox>

      //DragDrop.as

      package actionscripts
      {
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.events.DragEvent;
      import flash.events.MouseEvent;
      import mx.containers.Box;
      import mx.controls.Image;

      public class DragDrop {
      public var xOff:Number;
      public var yOff:Number;

      public var imageX:Number;
      public var imageY:Number;

      public function DragDrop(x:Number, y:Number) {
      this.imageX = x;
      this.imageY = y;
      }

      public function setImageX(value:Number):void {
      imageX = value;
      }

      public function setImageY(value:Number):void {
      imageY = value;
      }

      public function doDragEnter(event:DragEvent):void {
      DragManager.acceptDragDrop(Box(event.target));
      }

      public function mouseMoveHandler(event:MouseEvent):void {
      var dragInitiator:Image = Image(event.currentTarget);

      var ds:DragSource = new DragSource();
      ds.addData(event.currentTarget, 'img');

      var imageProxy:Image = new Image();
      imageProxy.source = "/images/map.jpg";

      xOff = event.currentTarget.mouseX;
      yOff = event.currentTarget.mouseY;

      DragManager.doDrag(dragInitiator, ds, event, imageProxy, 0, 0, 0.00);
      }

      public function doDragDrop(event:DragEvent):void {
      imageX = event.currentTarget.mouseX - xOff;
      imageY = event.currentTarget.mouseY - yOff;
      }

      public function getImageX():Number {
      return imageX;
      }

      public function getImageY():Number {
      return imageY;
      }
      }
      }