Dragging in spark List does not work in Flex mobile app? Test case and screenshot attached

Question

I would like to reorder items of a List in a Flex mobile app by dragging them around with a finger.

As a first step I have copied the example from Adobe document Using drag-and-drop with list-based controls - but while their example works fine as web application, nothing happens in the mobile app below:

screenshot

Why doesn't it work (like is some skin missing in the mobile theme?)

Is there a way to make it work (at least reordering items in a mobile List)?

Below is the simple test code I've tried - just put it into a new blank (i.e. without a nav. bar) Flex mobile project in Flash Builder:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               applicationDPI="160"
               creationComplete="initApp()">

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private function initApp():void {
                srclist.dataProvider = 
                    new ArrayCollection(['Reading', 'Television', 'Movies']);
                destlist.dataProvider = new ArrayCollection([]);
            }
        ]]>
    </fx:Script>

    <s:HGroup>
        <s:VGroup>
            <s:Label text="Available Activities"/>
            <s:List id="srclist" 
                    allowMultipleSelection="true"
                    dragEnabled="true"
                    dragMoveEnabled="true"/>
        </s:VGroup>

        <s:VGroup>
            <s:Label text="Activities I Like"/>
            <s:List id="destlist" 
                    dropEnabled="true"/>
        </s:VGroup>
    </s:HGroup>

    <s:Button id="b1" 
              label="Reset"
              click="initApp();"/>  

</s:Application>

This isn't implemented in the mobile Flex List. I suspect this is documented somewhere; but Ii'm not sure where. You're going to have to roll your own to get drop and drop working with a list on mobile. — JeffryHouser, Feb 26 '13 at 16:11

score 1 · Accepted Answer · answered Feb 28 '13 at 00:18

I have found and tried by myself a super workaround on this page.

Just copy classes from his example and add the custom itemRenderer to your source list.

        <s:List id="srclist" 
                allowMultipleSelection="true"
                dragEnabled="true"
                dragMoveEnabled="true">
            <s:itemRenderer>
                <fx:Component>
                    <local:DraggableIconItemRenderer decorator="{DragThumb}" />
                </fx:Component>
            </s:itemRenderer>
        </s:List>

Respect to the author!

Here is the result:

enter image description here

Dragging in spark List does not work in Flex mobile app? Test case and screenshot attached

1 Answers1