Solved

Flex Drag/Drop from List

Posted on 2011-03-17
13
497 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
  • 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
 
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
Why spend so long doing email signature updates?

Do you spend loads of your time carrying out email signature updates? Not very interesting are they? Don’t let signature updates get you down. Let Exclaimer Cloud - Signatures for Office 365 make managing email signatures a breeze.

 

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Difference between FDS and LCDS 7 341
why .swf is not adjusting to window.open() for 75%zoom in windows7 18 453
EditText on the DialogBox 1 373
Adobe live streaming 8 694
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…
Microsoft Office Picture Manager was included in Office 2003, 2007, and 2010, but not in Office 2013. Users had hopes that it would be in Office 2016/Office 365, but it is not. Fortunately, the same zero-cost technique that works to install it with …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 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

14 Experts available now in Live!

Get 1:1 Help Now