Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drag and Drop from a Tree

Posted on 2008-10-06
2
Medium Priority
?
6,472 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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…
With the evolution of technology, we have finally reached a point where it is possible to have home automation features like having your thermostat turn up and door lock itself when you leave, as well as a complete home security system. This is a st…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Suggested Courses

650 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