Using drag and drop with a spark List in a mobile Flex application
In a mobile Flex project the default interactionMode is touch. When in this mode drag and drop functionality on the spark List is not supported. This post demonstrates a workaround for adding drag and drop support to your mobile Lists by subclassing IconItemRenderer and dynamically changing the interactionMode on the fly.
The approach I took was just to get something simple working that would use the existing desktop drag and drop behavior (when interactionMode=mouse). First I subclassed IconItemRenderer and added a new Sprite that is drawn on top of the decorator object to receive a mouseDown event. When it receives that event it changes the interactionMode of the List and swaps out the Scroller skin for a new skin that doesn’t have any scrollbars. When the user mouses up the interactionMode and original Scroller skin are restored. Finally I had to set the DragManager cursor styles to an empty transparent gif.
This DraggableIconItemRenderer component inherits from IconItemRenderer so it has all of the features that class provides and just layers on top this primitive drag and drop ability. See DragThumb.fxg in the attached project ZIP for an example decorator that looks similar to a drag thumb used on iOS (check out the iPhone Weather app settings screen).
If your decorator is too small for someone to grab with their finger you might find the extraDragThumbHitPaddingTop, extraDragThumbHitPaddingLeft, extraDragThumbHitPaddingRight, extraDragThumbHitPaddingBottom properties useful to define a hit area that is larger than the decorator’s size.
Warning: This approach is one big hack, but it has worked well for me in some simple situations so I thought I would share it here in case others are interested in using this or taking it further.
Here is a sample Flex Mobile Project that demonstrates this code in action: DraggableIconItemRenderer.zip
Note: The DragManager code has not been optimized for mobile (see SDK-29334)
Note: This sample requires Flash Builder 4.5 and the final release build of Flex 4.5.
Thanks for sharing, this is a pretty simple solution.
In my example I use a plain LabelItemRenderer, and so I added the mouse down listener on the item renderer instead of the sprite and it worked fine too.
Hi Steven,
I am a rookie Flashbuilder and Flex developer.
This is a great post. I wouldn’t be able to come up with a solution like this.
I have couple questions:
What would your approach be if you need to add another button per row to allow deletion of each row?
Thanks for your help.
@Charles
Second question was:
How would you modify it so that the icons will only appear when you select the row?
Thanks.
@Charles
1. You might find this post useful: http://flexponential.com/2009/09/23/deleting-items-in-a-list-from-an-item-renderer/
2. You might want to try looking into extending IconItemRenderer and writing a custom iconFunction method.
@Steven Shongrunden
Thanks Steven. I started working on option 2 yesterday.
I placed an delete (image of an X) at the Icon location with iconFunction and used your method of putting an sprite on top of it to detect the delete press. It worked a few minutes ago.
Thanks for your great example and put me on the right path.
Thanks for this sample,
For further enhancement I am asking you this question.
How can I add a textbox and label in each item of this list ?
thanks, works great
Thanks, works with AIR 3.5 and FB 4.7 too.
This really works nicely. Thanks for the help!