Flex 2: Drag and Drop

Question

Hi,
I need help or maybe I can get some advice. I have a TileList
that gets populated by buttons. I am using HTTPService as my
WebService. I have a component called Buttons.mxml, to use as
itemRenderer for my TileListEx.mxml. Everything is good as far as
displaying all my buttons onto my TileList. My problem is when
doing Drag-and-Drop. Right now when I drag a button and drop it in
to a different spot/location (inside my TileList), it moves the
other buttons too at the same time. I cannot drop a single button
onto an exact position without affecting the other buttons. Is
there a way to when you do a drag and drop, it will drop the item
onto exact position as to where you wanted to drop it in. I
attached my sample code, maybe someone can help me and give me some
advice onto how to fix my problem or maybe can tell me a better
solution of doing this.
Buttons.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalGap="0" horizontalGap="0" >
<mx:Button label="{data.name}" width="100" height="50"
textAlign="center" />
</mx:VBox>
TileListEx.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
xmlns:local="*" layout="absolute" backgroundAlpha="0"
creationComplete="itemRequest.send()">
<mx:HTTPService id="itemRequest"
url="C:/TestFlex/menuitem.xml" useProxy="false" />
<mx:VBox x="10" y="41" width="1000" height="550">
<mx:Panel width="575" height="550" layout="absolute"
id="menuItm" title="Fruits">
<mx:TileList direction="vertical"
dataProvider="{itemRequest.lastResult.menuitem.items.item}"
height="100%" width="100%"
itemRenderer="Buttons" rowHeight="60" columnWidth="110"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
dragEnter="true"/>
</mx:Panel>
</mx:VBox>
</mx:Application>
My menuitem.mxml
<?xml version="1.0" encoding="Utf-8" ?>
<menuitem>
<items><item><name>Combo Chz
Burg</name></item>
<item><name>Burger</name></item>
<item><name>Cheese
Burger</name></item>
<item><name>Bac Chz
Burger</name></item>
<item><name>Lumberjack</name></item>
<item><name>Boomer
Burger</name></item>
<item><name></name></item>
<item><name></name></item>
<item><name>Double
Play</name></item>
<item><name></name></item>
<item><name>No Roll</name></item>
<item><name></name></item>
<item><name>Well Done</name></item>
<item><name>Rare</name></item>
<item><name></name></item>
<item><name></name></item>
<item><name>Sausage</name></item>
<item><name>Pulled
Pork</name></item>
<item><name>Grilled
Cheese</name></item>
<item><name></name></item>
<item><name>Chicken
Little</name></item>
<item><name>King of
Klubs</name></item>
<item><name></name></item>
<item><name></name></item>
<item><name>Do It To
It</name></item>
<item><name>Sub</name></item>
<item><name></name></item>
<item><name>Hot Drink</name></item>
<item><name>Bottle
Water</name></item>
<item><name>Soda</name></item>
<item><name></name></item>
<item><name></name></item>
<item><name>Open Food</name></item>
<item><name>Eat In</name></item>
<item><name>Take Out</name></item>
<item><name>Phone
Order</name></item>
<item><name>Extra</name></item>
<item><name>Orange</name></item>
<item><name></name></item>
<item><name></name></item></items>
</menuitem>
Thank you very much in advance.
-alfie

Answer 1

When working with drag and drop, troubleshoot starting with
the most obvious: Where exactly is the Canvas you're dropping onto
and how large is it. Give the Canvas a temporary red background
(myCanvas.setStyle("backgroundColor", "#FF0000")) to see exactly
where it is on the stage. If you can't see it after you've changed
the background color, chances are you can't drop anything onto it
either.
Glancing over your code I see a couple things:
1. In DesignCanvas, you don't define the dropTarget variable,
which is supposed to be a reference to the DesignCanvas.
private function doDragEnter(event:DragEvent):void
var dropTarget:Canvas = this;
DragManager.acceptDragDrop(dropTarget);
2. Your override of updateDisplayList() doesn't include
super.updateDisplayList(unscaledWidth, unscaledHeight);
I'd comment out your complete updateDisplayList() override
and troubleshoot the drop target first, then you can start adding
the other functionality and see if it works as you'd like.
P.S. Just as a best practice, start your classes with
uppercase and variables and functions lowercase, so DesignCanvas,
not designCanvas.
TS