Solved

Flex Drag/Drop from List

Posted on 2011-03-17
13
499 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Automatic Notifications 16 335
Flash AS3 & random animation 7 853
flex simple crossdomain problem 1 843
Accessing GPS on Windows Tablet using Adobe Air 4 406
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…
SEO can be a real minefield to navigate, but there are three simple ways to up your SEO game just be re-assessing your content output.
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …

770 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