Solved

Flex Drag/Drop from List

Posted on 2011-03-17
13
511 Views
Last Modified: 2012-05-11
Hello! I have created an Application that allows dragging text entries from one list to another. I need it to Show a dialogue listing those items that are in the second list every time an item is dragged over. This works except it does not show in the dialogue the last item moved over. So for instance, the first item moved will not show up and then next will show all the items except the last item that was moved over. My code is below:

Thanks!
Ron

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="initApp();">

	
			   
			   
			   
	
	<fx:Script>
		<![CDATA[

			import mx.controls.List;
			import mx.events.DragEvent;
			import mx.events.ListEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			 import mx.managers.DragManager;


		

			private function initApp():void 
			{
				srclist.dataProvider = 
				new ArrayCollection(['first', 'second', 'third']);
				destlist.dataProvider = new ArrayCollection([]);
            }
			private function onDragEvent(event:DragEvent):void
			{
				var myList:List =  event.currentTarget as List;
				Alert.show("item dropped: " +  myList.dataProvider + " :");
    
			}

		]]>
	</fx:Script>		   
			   		

	
	<mx:Panel id="panel2" title="draganddrop" width="500" height="500">
		<mx:HBox>
			<mx:VBox>
				<mx:Label text="moveFrom"/>
				<mx:List id="srclist" 
					allowMultipleSelection="true"
					dragEnabled="true"
					dragMoveEnabled="true"
					dropEnabled="true"
					/>
			</mx:VBox>

			<mx:VBox>
				<mx:Label text="moveTO"/>
				<mx:List id="destlist" 
					allowMultipleSelection="true"
					dragEnabled="true"
					dragMoveEnabled="true"
					dropEnabled="true"
					dragDrop="onDragEvent(event);"
					/>
					
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>	
</mx:Application>

Open in new window

0
Comment
Question by:ronyosi
[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
  • 7
  • 6
13 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 35160880
Modified your drop function

private function onDragEvent(event:DragEvent):void
                  {
                        var myList:List =  event.currentTarget as List;
                        var dragSource:Array = event.dragSource.dataForFormat('items') as Array;
                        Alert.show("item dropped:\n" +  dragSource.join('\n'));
                        
                  }
0
 

Author Comment

by:ronyosi
ID: 35167895
Thanks dgofman :)
I tried the function and it shows me only what the item is that I dropped in.
How do I make the Alert display all the items in the second list?

Ron
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35167924
Why you cannot filter your ArrayCollection by drop items and get rest of items.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26885698.html?cid=1131#a35134376

or

trace(srclist.dataProvider);
0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
LVL 29

Expert Comment

by:dgofman
ID: 35173042
Dear ronyosi,
I think my solutions should work for your prety well.
Please can you close this question?
Thanks,
David
0
 

Author Comment

by:ronyosi
ID: 35190929
I might actually need you to spell it out.
I have not been able to put your solution together
can you please assist me? I tried putting it together and it did not work the array just stores everything now with repetitions...
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35192293
Please can you give me your code sample?
0
 

Author Comment

by:ronyosi
ID: 35193315
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="initApp();">

	<fx:Script>
		<![CDATA[

			import mx.collections.ArrayList;
			import mx.controls.List;
			import mx.events.DragEvent;
			import mx.events.ListEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import mx.managers.DragManager;

			[Bindable] 
			public var itemsDropped:ArrayCollection; 
		

			private function initApp():void 
			{
				srclist.dataProvider = 
				new ArrayCollection(['first', 'second', 'third']);
				
				itemsDropped = new ArrayCollection();		
				
				destlist.dataProvider = new ArrayCollection([]);
				
            }

			
			private function onDragEvent(event:DragEvent):void
                  {
					itemsDropped = destlist.dataProvider as ArrayCollection;
					Alert.show(itemsDropped.toString());
                  } 
			

		]]>
	</fx:Script>		   
			   		

	
	<mx:Panel id="panel2" title="draganddrop" width="500" height="500">
		<mx:HBox>
			<mx:VBox>
				<mx:Label text="moveFrom"/>
				<mx:List id="srclist" 
					allowMultipleSelection="true"
					dragEnabled="true"
					dragMoveEnabled="true"
					dropEnabled="true"
					/>
			</mx:VBox>

			<mx:VBox>
				<mx:Label text="moveTO"/>
				<mx:List id="destlist" 
					allowMultipleSelection="true"
					dragEnabled="true"
					dragMoveEnabled="true"
					dropEnabled="true"
					dragDrop="onDragEvent(event);"
					/>
					
			</mx:VBox>
			
			
			

		</mx:HBox>
	
					
		
	</mx:Panel>	
	
	
</mx:Application>

Open in new window

0
 

Author Comment

by:ronyosi
ID: 35193333
so you see, this one does just what I need, EXCEPT it misses the first item dragged to the next list.
Do you know how to fix this? Also why it does this?

Thanks,
Ron
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35194147
I don't see you are using my solution, plus I can handle multiple selection and drag & drop to destination List component

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.List;
			import mx.events.DragEvent;

			[Bindable] 
			public var list:ArrayCollection = new ArrayCollection(['first', 'second', 'third']); 

			private function onDragEvent(event:DragEvent):void
			{
				var myList:List =  event.currentTarget as List;
				var dragSource:Array = event.dragSource.dataForFormat('items') as Array;
				Alert.show("item dropped:\n" +  dragSource.join('\n') + 
					"\nTotal of drop items:" + (destlist.dataProvider.length + dragSource.length) +
					"\nTotal of source items: " + (srclist.dataProvider.length - dragSource.length));
			}
		]]>
	</fx:Script>

	<mx:Panel id="panel2" title="draganddrop" width="500" height="500">
		<mx:HBox>
			<mx:VBox>
				<mx:Label text="moveFrom"/>
				<mx:List id="srclist" dataProvider="{list}"
						 allowMultipleSelection="true"
						 dragEnabled="true"
						 dragMoveEnabled="true"
						 dropEnabled="true"
						 />
			</mx:VBox>
			
			<mx:VBox>
				<mx:Label text="moveTO"/>
				<mx:List id="destlist" dataProvider="[]"
						 allowMultipleSelection="true"
						 dragEnabled="true"
						 dragMoveEnabled="true"
						 dropEnabled="true"
						 dragDrop="onDragEvent(event);"
						 />
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>	
</mx:Application> 

Open in new window

0
 

Author Comment

by:ronyosi
ID: 35201854
your solution is not what I need...
Again, Whatever items are in the second box I would like those items to be stored in an array so that they can be kept track of. Your example did not do this. Instead it showed one item at a time.
Sorry for not using your example, but it was not what I was asking for. My example is closer to what is required so I thought I would help you.

Ron
0
 

Author Comment

by:ronyosi
ID: 35201900
Originally I just wanted to be able to print out a list of the items that are in the second list.
Remember?
"Show a dialogue listing those items that are in the second list every time an item is dragged over."
Meaning when an Item is dragged in, show an alert with a list of all the items in the box its dragged into.

Please help :)
0
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 35201985
By my last example you can see how to validate items from source and destination list boxes.
If you want to filter items it’s easy, just add couple lines from my first link:
Different ways you can solve this problem I am giving two solutions

private function onDragEvent(event:DragEvent):void
{
	var myList:List =  event.currentTarget as List;
	var dragSource:Array = event.dragSource.dataForFormat('items') as Array;
	Alert.show("item dropped:\n" +  dragSource.join('\n') + 
		"\nTotal of drop items:" + (destlist.dataProvider.length + dragSource.length) +
		"\nTotal of source items: " + (srclist.dataProvider.length - dragSource.length) + 
		"\nItems in sourcelist: " + filterItems(srclist.dataProvider.source, dragSource) + 
		"\nItems in destlist: " + dragSource.concat(destlist.dataProvider.source));
}

private function filterItems(original:Array, dragSource:Array):Array{
	return original.filter(function(item:Object, idx:uint, arr:Array):Boolean {
		var found:Boolean = false;
		for(var i:uint = 0; i < dragSource.length; i++){
			var dragItem:String = dragSource[i];
			if(dragItem == item){
				found = true;
				break
			}
		}
		return (found == false);
	});
}

Open in new window

0
 

Author Closing Comment

by:ronyosi
ID: 35202010
Very Helpful answer dgofman, very patient also :)
Thanks!!
0

Featured Post

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

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…
If you need to forecast numbers -- typically for finance -- the Windows and Mac versions of Excel 2016 have a basket of tools to get the job done.
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

617 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