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>

Open in new window

LVL 6
thebradnetworkAsked:
Who is Participating?
 
ngiamourisConnect With a Mentor Commented:
Here's a working version of your code. I have commented where appropriate. Also took the liberty to enhance your data model. Using the <States/> and <State/> elements makes it much easier to control what is allowed to be dropped and looks a bit nicer too :)
<?xml version="1.0"?>
<!-- dragdrop\DandDListToListShowFeedback.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        	import mx.core.DragSource;
            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("treeItems"))
                {
                    // 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);                
            }
            
            // ngiamouris: the List component by default understands "items" instead of "treeItems". But since you
            // are handling simple XML elements, you can just add the "items" format to the dragSource, so that the 
            // target List's default handler can handle the rest as if we were dragging from a List to a List.
            private function dragDropHandler(event:DragEvent):void {
            	var treeItems:Array = event.dragSource.dataForFormat("treeItems") as Array;
            	if (treeItems) {
            		event.dragSource.addData(treeItems, "items");
            	}
            	dragExitHandler(event);
            }            
 
            // Restore the border color.
            private function dragExitHandler(event:DragEvent):void {
              event.currentTarget.setStyle('borderColor', tempBorderColor);
              borderColorSet = true;
            }
 
            // ngiamouris: to ensure that you are not allowed to drop "folders", we need to check the dragged treeItems.
            private function dragEnterHandler(event:DragEvent):void {
				event.preventDefault();
				if (event.dragSource.hasFormat("treeItems")) {
					for each (var itm:XML in event.dragSource.dataForFormat("treeItems")) {
            			if (itm.name() != "State")
            				return;
            		}
					DragManager.acceptDragDrop(secondList);
				}
            }
        ]]>
    </mx:Script>
 
    <mx:HBox id="myHB" width="500">
        <mx:Tree id="tree1" labelField="@label" showRoot="true" width="250" dragEnabled="true">
           <mx:XMLListCollection id="Teams">
                   <mx:XMLList>
		               <States label="South">
		                     <State label="Alabama" />
		                     <State label="Tennesee" />
		                     <State label="Georgia"/>
		                     <State label="Florida" />
		                     <State label="South Carolina" />
		               </States>
                   </mx:XMLList>
           </mx:XMLListCollection>
        </mx:Tree>
        <mx:List  id="secondList"
        	labelField="@label"
        	
            borderThickness="2"
            dropEnabled="true"
            dragEnter="dragEnterHandler(event);"
            dragOver="dragOverHandler(event);"
            dragDrop="dragDropHandler(event);"
            dragExit="dragExitHandler(event);" 
            width="225">
        	
        	<mx:XMLListCollection>
                   <mx:XMLList>
                       <State label="Nebraska" />
                       <State label="Montana" />
                       <State label="Oklahoma"/>
                       <State label="Idaho" />
                       <State label="Oregon" />
                   </mx:XMLList>
           </mx:XMLListCollection>
        
            
        </mx:List>
    </mx:HBox>
    
    <mx:Button id="b1" 
        label="Reset"
    />
 
 
    
</mx:Application>

Open in new window

0
 
thebradnetworkAuthor Commented:
Thanks for your help!
0
All Courses

From novice to tech pro — start learning today.