Solved

Drag and Drop from a Tree

Posted on 2008-10-06
2
6,409 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
Comment Utility
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
Comment Utility
Thanks for your help!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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…
In this article, I will show you HOW TO: Create your first Windows Virtual Machine on a VMware vSphere Hypervisor 6.5 (ESXi 6.5) Host Server, the Windows OS we will install is Windows Server 2016.
This video discusses moving either the default database or any database to a new volume.
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

762 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

15 Experts available now in Live!

Get 1:1 Help Now