Flex Drag/Drop from List

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

ronyosiAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
dgofmanConnect With a Mentor Commented:
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
 
dgofmanCommented:
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
 
ronyosiAuthor Commented:
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
Easily manage email signatures in Office 365

Managing email signatures in Office 365 can be a challenging task if you don't have the right tool. CodeTwo Email Signatures for Office 365 will help you implement a unified email signature look, no matter what email client is used by users. Test it for free!

 
dgofmanCommented:
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
 
dgofmanCommented:
Dear ronyosi,
I think my solutions should work for your prety well.
Please can you close this question?
Thanks,
David
0
 
ronyosiAuthor Commented:
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
 
dgofmanCommented:
Please can you give me your code sample?
0
 
ronyosiAuthor Commented:
<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
 
ronyosiAuthor Commented:
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
 
dgofmanCommented:
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
 
ronyosiAuthor Commented:
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
 
ronyosiAuthor Commented:
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
 
ronyosiAuthor Commented:
Very Helpful answer dgofman, very patient also :)
Thanks!!
0
All Courses

From novice to tech pro — start learning today.