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>
Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top