Problem
I need to drag items from a List and drop them onto a trash bin to remove them from the list. The trash bin needed some sort of animation to indicate an item was successfully removed from the List.
Solution
Use DragManager, an Image, and a rotate effect.
Detailed explanation
Flex Drag/Drop Animated Trash Bin
I've created a little example of how to do an animated trash bin using Adobe's Flex 3. I needed the ability to drag items from a List and drop them over a trash basket to delete them. While working on it, I thought I'd animate the trash basket to give the user a visual queue that the delete succeeded. So I thought why not just have the trash basket dump over, to show the user the item has been discarded?
View a working version here:
http://www.brentlamborn.com/examples/flex_drag_drop_trash/
Source:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"><mx:Script>
<![CDATA[
{
import mx.effects.easing.*;import mx.events.DragEvent;import mx.managers.DragManager;private function dragEnterHandler(event:DragEvent):void // Get the drop target component from the event object.
var dropTarget:Image =event.currentTarget as Image;// Accept the drop.
DragManager.acceptDragDrop(dropTarget);
}
// Called if the target accepts the dragged object and the user
// releases the mouse button while over the drop target.
{
trash.visible =
trash.visible =
private function dragDropHandler(event:DragEvent):void false;true; //causes effect to fire}
]]>
</mx:Script>
<!-- Rotate effect -->
angleFrom="
angleTo="
easingFunction="
duration="
<mx:Rotate id="rotate"-180"0"Elastic.easeInOut"2000" />
<mx:HBox>
<!-- List -->
alternatingItemColors="
themeColor="
dragEnabled="
dragMoveEnabled="
dropEnabled="
<mx:List x="506" y="10" height="150" width="150" id="list" [#FFFFFF, #EEEEEE]" #8C8196"true"true"true"><mx:dataProvider>
<mx:String>item 1</mx:String>
<mx:String>item 2</mx:String>
<mx:String>item 3</mx:String>
<mx:String>item 4</mx:String>
<mx:String>item 5</mx:String>
</mx:dataProvider>
</mx:List>
<!-- Trash can -->
width="
x="
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);" showEffect="
<mx:Image source="images/trash.png" toolTip="Trash"30" height="30" 448" y="792" id="trash"{rotate}" />
</mx:Application>
</mx:HBox>
Brent Lamborn | Apple Offers
