Manual Drag&Drop on Panel components

Question

Ok people I have been following this example
http://blogs.adobe.com/flexdoc/drag_and_drop/
What the goal of my application will be to have a canvas on
top of my application and one at the bottom. I will start off with
a set of dynamically generated panels in the top or bottom canvas,
doesn't really matter which. I want to be able to count how many
panels are in each canvas and get the related id and name for each
panel in each canvas.
I have set up a canvas at the top where I pretty much just
have the code from that example I linked to at the top except that
my panels are generated on the fly and their count is variable. I
am STRUGGLING to create a "two way drag and drop" between the two
canvases (moving child panel from the top canvas to the bottom
canvas and vice versa).
I have found PLENTY of two way drop and drag examples but
they all were about lists, datagrid, or tree components -
components that already come built in with "drag and drop" and "two
way drag and drop" but in my case the drag and drop is manually
created.
I am totally clueless as to the process. Can anyone point me
in the right direction? I posted in the yahoo usergroups but so far
my post has NOT been approved and it was posted like three hours
ago.
Any help is GREATLY appreciated.
Here is part of my mxml:
<mx:Canvas id="memberFilters"
width="680" height="275"
borderStyle="solid"
backgroundColor="#B6FABB"
x="10" y="10"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event);">
</mx:Canvas>
<mx:Canvas id="nonMemberFilters"
width="680" height="275"
borderStyle="solid"
backgroundColor="#FBB7B7"
x="10" y="325"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event);">
</mx:Canvas>
here is part of of my .as file:
// Drag initiator event handler for
// the title bar's mouseMove event.
private function tbMouseMoveHandler(event:MouseEvent):void
var dragInitiator:Panel=Panel(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(event.currentTarget, 'panel');
// Update the xOff and yOff variables to show the
// current mouse location in the Panel.
xOff = event.currentTarget.mouseX;
yOff = event.currentTarget.mouseY;
// Initiate d&d.
DragManager.doDrag(dragInitiator, ds, event);
// Function called by the canvas dragEnter event; enables
dropping
private function doDragEnter(event:DragEvent):void
DragManager.acceptDragDrop(Canvas(event.target));
// Function called by the Canvas dragDrop event;
// Sets the panel's position,
// "dropping" it in its new location.
private function doDragDrop(event:DragEvent):void
// Compensate for the mouse pointer's location in the title
bar.
var tempX:int = event.currentTarget.mouseX - xOff;
event.dragInitiator.x = tempX;
var tempY:int = event.currentTarget.mouseY - yOff;
event.dragInitiator.y = tempY;
// Put the dragged panel on top of all other components.
memberFilters.setChildIndex(Panel(event.dragInitiator),
memberFilters.numChildren-1);
// Function called by the Canvas dragDrop event;
// Sets the panel's position,
// "dropping" it in its new location.
private function doDragDrop(event:DragEvent):void
// Compensate for the mouse pointer's location in the title
bar.
var tempX:int = event.currentTarget.mouseX - xOff;
event.dragInitiator.x = tempX;
var tempY:int = event.currentTarget.mouseY - yOff;
event.dragInitiator.y = tempY;
// Put the dragged panel on top of all other components.
nonMemberFilters.setChildIndex(Panel(event.dragInitiator),
nonMemberFilters.numChildren-1);
public function onAvailableFiltersResult(result:Array):void
phpData = new ArrayCollection(result);
for(x=0; x<phpData.length; x++) {
// create each new panel and add it to the parent canvas
var filterData:Panel = new Panel();
filterData.id = "id__" + phpData[x].data;
filterData.title = phpData[x].label;
filterData.addEventListener(MouseEvent.MOUSE_DOWN,
tbMouseMoveHandler);
memberFilters.addChild(filterData);
the code in the .as is my code along with the code from the
link above

Answer 1

Here is the updated code ...
I replaced the onAvailableFiltersResult with createPanels to
create some 5 panels. You can replace it with
onAvailableFiltersResult.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="createPanels()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.managers.DragManager;
import mx.containers.Panel;
import mx.core.DragSource;
import mx.events.DragEvent;
// Variables used to hold the mouse pointer's location in
the title bar.
// Since the mouse pointer can be anywhere in the title bar,
you have to
// compensate for it when you drop the panel.
public var xOff:Number;
public var yOff:Number;
// Drag initiator event handler for
// the title bar's mouseMove event.
private function tbMouseMoveHandler(event:MouseEvent):void
var dragInitiator:Panel=Panel(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(event.currentTarget, 'panel');
// Update the xOff and yOff variables to show the
// current mouse location in the Panel.
xOff = event.currentTarget.mouseX;
yOff = event.currentTarget.mouseY;
// Initiate d&d.
DragManager.doDrag(dragInitiator, ds, event);
// Function called by the canvas dragEnter event; enables
dropping
private function doDragEnter(event:DragEvent):void
DragManager.acceptDragDrop(Canvas(event.target));
// Function called by the Canvas dragDrop event;
// Sets the panel's position,
// "dropping" it in its new location.
private function doDragDrop1(event:DragEvent):void
// Compensate for the mouse pointer's location in the title
bar.
var tempX:int = event.currentTarget.mouseX - xOff;
event.dragInitiator.x = tempX;
var tempY:int = event.currentTarget.mouseY - yOff;
event.dragInitiator.y = tempY;
memberFilters.addChild(Panel(event.dragInitiator));
// Put the dragged panel on top of all other components.
memberFilters.setChildIndex(Panel(event.dragInitiator),
memberFilters.numChildren-1);
// Function called by the Canvas dragDrop event;
// Sets the panel's position,
// "dropping" it in its new location.
private function doDragDrop2(event:DragEvent):void
// Compensate for the mouse pointer's location in the title
bar.
var tempX:int = event.currentTarget.mouseX - xOff;
event.dragInitiator.x = tempX;
var tempY:int = event.currentTarget.mouseY - yOff;
event.dragInitiator.y = tempY;
nonMemberFilters.addChild(Panel(event.dragInitiator));
// Put the dragged panel on top of all other components.
nonMemberFilters.setChildIndex(Panel(event.dragInitiator),
nonMemberFilters.numChildren-1);
public function createPanels():void
for(x=0; x<5; x++) {
// create each new panel and add it to the parent canvas
var filterData:Panel = new Panel();
filterData.id = "id__" + x;
filterData.title = "Panel-" + x;
filterData.addEventListener(MouseEvent.MOUSE_DOWN,
tbMouseMoveHandler);
memberFilters.addChild(filterData);
]]>
</mx:Script>
<mx:Canvas id="memberFilters"
width="680" height="275"
borderStyle="solid"
backgroundColor="#B6FABB"
x="10" y="10"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop1(event);">
</mx:Canvas>
<mx:Canvas id="nonMemberFilters"
width="680" height="275"
borderStyle="solid"
backgroundColor="#FBB7B7"
x="10" y="325"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop2(event);">
</mx:Canvas>
</mx:Application>