0 Replies Latest reply on Sep 20, 2007 9:10 AM by GuyPhempoompanitch

    Drag a list item onto a canvas

    GuyPhempoompanitch
      Hi everyone. I've been trying to wrap my head around this one for a couple of days. I've looked at the various examples I could find online, but I still cannot get this working. I'm trying to drag a list item, which is text, onto an image that is on a canvas. I'll need to re-position the text once its on the canvas, if possible. If someone could look at my code and help me out, I will forever be your best friend. Thanks.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:imagezoom="ImageZoom.*"
      width="100%"
      verticalCenter="0"
      horizontalCenter="0"
      addedToStage="stage.addEventListener(KeyboardEvent.KEY_DOWN,function(event:KeyboardEvent) :void{if(event.keyCode==27)fscommand('quit')});"
      layout="absolute" viewSourceURL="srcview/index.html"
      creationComplete="if (Capabilities.playerType=='StandAlone') zoomer.init(); annotationFeedRequest.send();">

      <mx:HTTPService
      id="annotationFeedRequest"
      url=" http://localhost/flex/getAnnotations.cfm"
      useProxy="false" />
      <mx:ApplicationControlBar dock="false" right="0" width="150">
      <mx:List id="myList" dragMoveEnabled="false" dragEnabled="true" dataProvider="{annotationFeedRequest.lastResult.annotations.annotation}" labelField="ANNOTATIONNAME" width="139" height="324" enabled="true"/>
      </mx:ApplicationControlBar>

      <mx:Script>
      <![CDATA[
      import mx.core.DragSource;
      import mx.managers.DragManager;
      import mx.events.*;
      import mx.containers.Canvas;

      // Called when the user clicks the mouse on either colored canvas.
      // Initializes the drag.
      private function dragIt(event:MouseEvent, text:String,
      format:String):void {

      // Get the drag initiator component from the event object.
      var dragInitiator:Canvas=Canvas(event.currentTarget);
      // Create a DragSource object.
      var ds:DragSource = new DragSource();
      // Add the data to the object.
      ds.addData(text, format);

      // Create a Canvas container to use as the drag proxy.
      // You must specify a size for the proxy image,
      // or else it will not appear.
      var canvasProxy:Canvas = new Canvas();
      canvasProxy.width=30;
      canvasProxy.height=30;
      canvasProxy.setStyle('backgroundColor', 'black');

      // Call the DragManager doDrag() method to start the drag.
      // For information on this method, see
      // the "Initiating the drag" section.
      DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
      }

      // Called if the user dragged a proxy onto the drop target canvas.
      private function doDragEnter(event:DragEvent, text:String):void {
      // Get the drop target component from the event object.
      var dropTarget:Canvas=Canvas(event.currentTarget);

      // Accept the drag only if the user is dragging data
      // identified by the 'color' format value.
      // if (event.dragSource.hasFormat('color')) {
      DragManager.showFeedback(DragManager.COPY); //shows the green plus sign
      DragManager.acceptDragDrop(dropTarget);
      // }
      }

      // Called if the target accepts the dragged object and the user
      // releases the mouse button while over the canvas.
      // Handles the dragDrop event for the List control.
      private function doDragDrop(event:DragEvent, text:String):void {
      // Get the data identified by the color format
      // from the drag source.
      // var data:Object = event.dragSource.dataForFormat('xyz222');
      var dropData:Object = new Object();
      dropData = event.dragSource.dataForFormat('xyz');
      // Set the canvas color.
      // viewport.setStyle("backgroundColor", data);
      // event.currentTarget..dataProvider.addItem(dropData);
      // Alert.show(event.draggedItem.valueOf()navigator.x + " - " + navigator.y);
      }

      ]]>
      </mx:Script>




      <mx:Canvas id="viewport"
      left="0" top="0"
      width="70%" height="100%"
      borderColor="black" borderStyle="solid"
      verticalScrollPolicy="off" horizontalScrollPolicy="off"
      dragEnter="doDragEnter(event,'xyz222');"
      dragDrop="doDragDrop(event,'xyz222');">

      <mx:Image id="image"
      showBusyCursor="true"
      source="M20070803DEN0001.jpg"
      complete="if (Capabilities.playerType!='StandAlone') if (thumb.content) zoomer.init()"
      cacheAsBitmap="true"/>

      <mx:Canvas id="hotspots">
      <!--
      <mx:Button id="btn1" label="test 1" x="{.5*hotspots.width}" y="{.5*hotspots.height}" click="zoomer.zoomTo(4);"/>
      <mx:Button label="test 2" x="{.4*hotspots.width}" y="{.4*hotspots.height}" click="zoomer.zoomTo(1);"/>
      <mx:Button label="test 3" x="{.6*hotspots.width}" y="{.6*hotspots.height}" click="zoomer.zoomTo(6);"/>
      -->
      </mx:Canvas>

      </mx:Canvas>

      <mx:Canvas id="navigator"
      right="200" top="20"
      borderColor="black" borderStyle="solid"
      dragEnter="doDragEnter(event,'xyz222')" dragDrop="doDragDrop(event,'xyz222')"
      verticalScrollPolicy="off" horizontalScrollPolicy="off">
      <mx:Box id="dragger" borderColor="black" borderStyle="none" backgroundAlpha=".5" backgroundColor="blue"/>
      <mx:Image id="thumb"
      source="M20070803DEN0001_thumb.jpg"
      complete="if (Capabilities.playerType!='StandAlone') if (image.content) zoomer.init()"
      alpha=".5"/>
      </mx:Canvas>

      <imagezoom:ImageZoomController
      id="zoomer"
      image="{image}"
      navigator="{navigator}"
      viewport="{viewport}"
      hotspots="{hotspots}"
      thumb="{thumb}"
      dragger="{dragger}"/>


      </mx:Application>