Solved

Drag and Drop from a Tree

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Flash As3 Swf 3 753
learning partner 1 214
rebuild swf 5 457
How to create a simple "throw object" gesture on as3 / air mobile ? 3 1,167
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…
Lotus Notes – formerly IBM Notes – is an email client application, while IBM Domino (earlier Lotus Domino) is an email server. The client possesses a set of features that are even more advanced as compared to that of Outlook. Likewise, IBM Domino is…
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now