Solved

Drag and Drop from a Tree

Posted on 2008-10-06
2
6,441 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 500 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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Automatic Notifications 16 349
flex4 : css styles 1 496
AS 3 - Movie editor 7 492
To integrate SSRS reports in flex 4.6 6 549
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…
This article describes a method of delivering Word templates for use in merging Access data to Word documents, that requires no computer knowledge on the part of the recipient -- the templates are saved in table fields, and are extracted and install…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

696 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