thebradnetwork
asked on
Drag and Drop from a Tree
I am trying to create a drag and drop from a tree. I cant seem to get the my items inside the folders to drag in. I do not want the folders to be able to drag into to the second table but the data inside the folders is what i am trying to get to drag in. The reason why i want the tree is for organizational purposes because I am going to be adding a lot more data.
<?xml version="1.0"?>
<!-- dragdrop\DandDListToListShowFeedback.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
// Variable to store original border color.
private var tempBorderColor:uint;
// Flag to indicate that tempBorderColor has been set.
private var borderColorSet:Boolean = false;
private function dragOverHandler(event:DragEvent):void {
// Explpicitly handle the dragOver event.
event.preventDefault();
// Since you are explicitly handling the dragOver event,
// call showDropFeedback(event) to have the drop target
// display the drop indicator.
// The drop indicator is removed
// automatically for the list controls by the built-in
// event handler for the dragDrop event.
event.currentTarget.showDropFeedback(event);
if (event.dragSource.hasFormat("items"))
{
// Set the border to green to indicate that
// this is a drop target.
// Since the dragOver event is dispatched continuosly
// as you move over the drop target, only set it once.
if (borderColorSet == false) {
tempBorderColor =
event.currentTarget.getStyle('borderColor');
borderColorSet = true;
}
// Set the drag-feedback indicator based on the
// type of drag-and-drop operation.
event.currentTarget.setStyle('borderColor', 'green');
if (event.ctrlKey) {
DragManager.showFeedback(DragManager.COPY);
return;
}
else if (event.shiftKey) {
DragManager.showFeedback(DragManager.LINK);
return;
}
else {
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
// Drag not allowed.
DragManager.showFeedback(DragManager.NONE);
}
private function dragDropHandler(event:DragEvent):void {
dragExitHandler(event);
}
// Restore the border color.
private function dragExitHandler(event:DragEvent):void {
event.currentTarget.setStyle('borderColor', tempBorderColor);
borderColorSet = true;
}
]]>
</mx:Script>
<mx:HBox id="myHB" width="500">
<mx:Tree id="tree1" labelField="@label" showRoot="true" width="250">
<mx:XMLListCollection id="Teams">
<mx:XMLList>
<mx:List id="south"
dragEnabled="true"
dragMoveEnabled="true" width="250"/>
<folder label="South">
<folder label="Alabama" />
<folder label="Tennesee" />
<folder label="Georgia"/>
<folder label="Florida" />
<folder label="South Carolina" />
</folder>
</mx:XMLList>
</mx:XMLListCollection>
</mx:Tree>
<mx:List id="secondList"
borderThickness="2"
dropEnabled="true"
dragOver="dragOverHandler(event);"
dragDrop="dragExitHandler(event);"
dragExit="dragExitHandler(event);" width="225"/>
</mx:HBox>
<mx:Button id="b1"
label="Reset"
/>
</mx:Application>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER