header
ask question
Click here to ask Question Now Its free No registration required. Flash, Flex, Flash Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
NileshPawar
Points:280
Posts:0
Answered

5/7/2010 12:28:13 AM

Title: Is it Possible to make dragged object acceptable on Drag Over of Droppable Target?


I am using TileList having drag-drop enabled. There is "Trash" which was dropped target to accept dragged object from TileList.

Is there any way to remove TileList dragged object on Drag-over of Trash?



1
Dave
Points: 970
Posts:1
Accepted Answer
5/7/2010 2:13:13 AM



you can use mouse over event of the trash object to remove the item from list, you can also use the hitTest property of objects to see if the object was dropped on trash object and then remove it .

2
NileshPawar
Points: 280
Posts:0
5/7/2010 3:27:02 AM



Thanks Dave for reply!!
But could you please assist me to use hit test between TileList item and HBox (drop target)?

I am seeing ppls are use Hit test only for Charts. Not getting a single example of drag drop with hit test.

I really appreciate your assistance.

Thanks,
Nilesh

3
Dave
Points: 970
Posts:1
5/7/2010 6:40:58 AM



Hi it would not be possible to use in build functionality of Dragmanager to drop items in the Hbox. Because the target should be able to accept a dataprovider for that. Instead you can simulate a similar effect using the list control in place of HBox. What I did here is that as soon as the object is dropped in the destination List it is removed , so it looks like a Hbox with no data inside and also the object gets removed. I hope it works for you . Here is actionscript code for this

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			
			private function initApp():void {
				sourceList.dataProvider = new ArrayCollection(['Orange', 'Apple', 'Banana']);
				destinationlist.dataProvider = new ArrayCollection([]);
			}
			protected function destlist_changeHandler():void
			{
				// check if dataProvider exists to avoid exception
				if(destinationlist.dataProvider != null){
					//Check if it contains data and remove 
					if(destinationlist.dataProvider.length>0){
						destinationlist.dataProvider.removeItemAt(0);
					}
				}
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:VBox>
			<mx:Label text="My Items"/>
			<mx:List id="sourceList" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>
		</mx:VBox>
		<mx:VBox >
			<mx:Label text="Remove items target "/>
			<mx:List id="destinationlist"  dropEnabled="true" updateComplete="destlist_changeHandler()"/>
		</mx:VBox>
	</mx:HBox>
</mx:Application>


4
NileshPawar
Points: 280
Posts:0
5/7/2010 6:56:12 AM



Hi Dave,

Thanks for reply with code.

I apologize not to make you more clear on issue. Please find code below having red colored box as a drop target.




<?xml version="1.0"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();">  
    <mx:Script>  
        <![CDATA[
        	import mx.core.IUIComponent;
        	import mx.core.UIComponent;  
            import mx.collections.ArrayCollection;  
            import mx.events.DragEvent;  
            import mx.managers.DragManager;  
              
            private function initApp():void {  
                sourceList.dataProvider = new ArrayCollection(['Orange', 'Apple', 'Banana']);  
            }  
            private function item_dragEnter(evt:DragEvent):void {
		        var obj:IUIComponent = evt.currentTarget as UIComponent;
		        //evt.stopImmediatePropagation();
		        DragManager.acceptDragDrop(obj);
		        DragManager.showFeedback( DragManager.LINK );
		    }
		
		    private function item_dragDrop(evt:DragEvent):void {
		        var item:Object = sourceList.selectedItem;
		        var idx:int = sourceList.dataProvider.getItemIndex(item);
		        sourceList.dataProvider.removeItemAt(idx);
		    }
        ]]>  
    </mx:Script>  
    <mx:HBox>  
        <mx:VBox>  
            <mx:Label text="My Items"/>  
            <mx:List id="sourceList" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>  
        </mx:VBox>  
        <mx:VBox >  
            <mx:Label text="Remove items target "/>  
            <mx:Box height="25" backgroundColor="red" id="trash" width="100%" dragDrop="item_dragDrop(event);" dragEnter="item_dragEnter(event);" />
        	<!-- dragOver="item_dragEnter(event)" -->
        </mx:VBox>  
    </mx:HBox>  
</mx:Application>

Issue is - I want to remove draggble item on drag over of the red box. Right now its removing (accepting) on dragenter / dragover + mouse up. As soon as the tilelist item coves over the red box (drop-able target)it should be removed immediately. Thanks a lot. Nilesh

5
Dave
Points: 970
Posts:1
5/7/2010 12:07:13 PM



Nilesh hope I got it right this time :)
the object is removes as soon as touches the box


<?xml version="1.0"?>    
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();">    
	<mx:Script>    
		<![CDATA[  
			import mx.collections.ArrayCollection;
			import mx.core.IUIComponent;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.managers.DragManager;    
			private function initApp():void {    
				sourceList.dataProvider = new ArrayCollection(['Orange', 'Apple', 'Banana']);    
			}    
			private function item_dragEnter(evt:DragEvent):void {  
				var obj:IUIComponent = evt.currentTarget as UIComponent;  
				DragManager.acceptDragDrop(obj); 
				//dispath mouse up event to drop object 
				dispatchEvent( new MouseEvent( MouseEvent.MOUSE_UP ) );
			}  
			protected function trash_dragCompleteHandler():void
			{
				//reset the default cursor
				cursorManager.removeAllCursors();
			}
		]]>    
	</mx:Script>    
	<mx:HBox>    
		<mx:VBox>    
			<mx:Label text="My Items"/>    
			<mx:List id="sourceList" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true" />    
		</mx:VBox>    
		<mx:VBox >    
			<mx:Label text="Remove items target "/>    
			<mx:Box height="25" backgroundColor="red" id="trash" width="100%"   dragEnter="item_dragEnter(event);" mouseOut="trash_dragCompleteHandler()" />  
		</mx:VBox>    
	</mx:HBox>    
</mx:Application> 


6
NileshPawar
Points: 280
Posts:0
5/7/2010 12:33:24 PM



Hey Dave that's what I was looking for. Thank you from the bottom of my heart for your response. You are not only a valued member of this group, you’re a dear friend.

Thanks once again.
- Nilesh


Post your Reply
Name  

Email

Type your Reply or Answer

Are you human? What is 4+7 



Members Login

Email  
Password
Forgot Password





This website focus on: Flash | Flex | FMS | RED5 | WOWZA | Flash Media Server | Adobe AIR | ActionScript,Flash Solutions | Flash Question | Flash Answers | Flash Developers | Flash Problem, Flash Help, Flash bugs, Flash workaround | Flash Blog | Flex Question Answers | Flash Forum | Flex Development | Actionscript development | Flash development | Adobe AIR development
Copyright © 2008 AskMeFlash.com. All rights reserved. Privacy Policy | Terms & Conditions