[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Drag and Drop from a Tree

Posted on 2008-10-06
2
Medium Priority
?
6,482 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:thebradnetwork
2 Comments
 
LVL 4

Accepted Solution

by:
ngiamouris earned 2000 total points
ID: 22668325
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
 
LVL 6

Author Comment

by:thebradnetwork
ID: 22671174
Thanks for your help!
0

Featured Post

Making Bulk Changes to Active Directory

Watch this video to see how easy it is to make mass changes to Active Directory from an external text file without using complicated scripts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Often times it's very very easy to extend a volume on a Linux instance in AWS, but impossible to shrink it. I wanted to contribute to the experts-exchange community a way of providing a procedure that works on an AWS instance. It can also be used on…
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question