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?
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 .
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
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>
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/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>
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