1 Reply Latest reply on Nov 13, 2007 9:56 AM by bsr328

    Another Drag and Drop from horizontal list to canvas problem

    robs72
      Hi,
      This is vaguely similar to the this topic but I seem to have made things even more complicated.

      Basic set up is a horizontal list that uses a custom component itemrenderer to display a thumbnail and label:
      <?xml version="1.0"?>
      <!-- Thumbnail.mxml -->
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="100" height="120" verticalAlign="top" verticalGap="3"
      verticalScrollPolicy="off" horizontalAlign="center" backgroundAlpha="0.0" alpha="1.0">
      <mx:Image id="img" height="60" width="80" source="assets/{data.file}" scaleContent="true"/>
      <mx:Label text="{data.text}" fontWeight="bold" width="100%" textAlign="center"/>
      </mx:VBox>


      The data is loaded up from an external XML file with this sort of format:

      <?xml version="1.0" encoding="UTF-8"?>
      <thumbnails>
      <thumb>
      <file>thumb_image_1.jpg</file>
      <text>Thumb 1</text>
      <url> http://www.blah.com</url>
      <id>thumb1</id>
      </thumb>
      ...
      </thumbnails>

      That's loaded up using the HTTPService and stored in a Model thing.

      I've got the dragging from the HL happening quite nicely and it drops fine on to the canvas area, code all hack off from the help files. The problem I'm having is finding out the data about the item I've just dropped, I should at least be able to get the source url for the thumbnail and the label text string, but I just don't know how to get it. The call back I'm using looks like this:

      private function doDragDrop(event:DragEvent, target1:Canvas):void {
      var vX:int = target1.mouseX;
      var vY:int = target1.mouseY;
      var vW:int = target1.width;
      var vH:int = target1.height;
      // follow variables give relative coordinate values so that if window size is altered
      // we don't have to do tricky calulations to reset rating positions.
      var vRx:Number = vX/vW;
      var vRy:Number = vY/vH;
      Alert.show(event.dragSource + " " + vX + " " + vY + " " + vRx + " " + vRy, 'Mouse drop loc', mx.controls.Alert.OK);
      }

      I just don't know how to get the info out of the event.dragSource.

      Here's the full mxml:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="srv.send()">

      <mx:Script>
      <![CDATA[
      private function xmlLoaded():void {
      thumbAC = srv.lastResult.thumbnails;
      }

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

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

      }

      // Called if the user dragged a proxy onto the drop target canvas.
      private function doDragEnter(event:DragEvent):void {
      // Get the drop target component from the event object.
      var dropTarget:Canvas=Canvas(event.currentTarget);
      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, target1:Canvas):void {
      var vX:int = target1.mouseX;
      var vY:int = target1.mouseY;
      // follow variables give relative coordinate values so that if window size is altered
      // we don't have to do tricky calulations to reset rating positions.
      Alert.show(event.dragSource + " " + vX + " " + vY, 'Mouse drop loc', mx.controls.Alert.OK);
      }
      ]]>
      </mx:Script>

      <mx:HTTPService id="srv" url="assets/thumbnails.xml" useProxy="false" result="xmlLoaded();"/>

      <mx:Model id="thumbAC"/>

      <mx:Panel height="160" layout="absolute" title="Thumbnail Browser" cornerRadius="10" id="thumbScrollBrowser" bottom="10" left="10" right="10">
      <mx:HorizontalList x="0" y="10" width="100%"
      height="110" id="thumbBrowser" dataProvider="{thumbAC.thumb}"
      dragEnabled="true" rollOverColor="#FFFFFF" selectionColor="#ffffff" borderColor="#FFFFFF"
      borderSides="0" borderStyle="none" alpha="1" backgroundAlpha="1.0"
      itemRenderer="Thumbnail">
      </mx:HorizontalList>

      </mx:Panel>

      <!-- THIS IS THE WALL -->
      <mx:ArrayCollection id="wallAC"/>
      <mx:Canvas id="myCanvas" backgroundColor="#ffffff" cornerRadius="10"
      borderStyle="solid"
      dragEnter="doDragEnter(event);"
      dragDrop="doDragDrop(event, myCanvas);" left="10" right="10" top="10" bottom="180">
      </mx:Canvas>

      </mx:Application>


      Thanks for any thoughts.

      Cheers,
      Rob