Link to home
Start Free TrialLog in
Avatar of thebradnetwork
thebradnetworkFlag for United States of America

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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of ngiamouris
ngiamouris

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of thebradnetwork

ASKER

Thanks for your help!