Another Drag and Drop from horizontal list to canvas problem

Question

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

Answer 1

This in the drop handler should give you back the XML you
just dropped:
var getListData:XML=
evtDrag.dragSource.dataForFormat("items");