Solved

Flex Drag/Drop from List

Posted on 2011-03-17
13
494 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
Highfive Gives IT Their Time Back

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!

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

707 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

18 Experts available now in Live!

Get 1:1 Help Now