在Spark列表中拖动在Flex移动应用程序中不起作用?附带测试用例和屏幕截图

时间:2013-02-26 15:58:19

标签: flex flex4 flex4.5 flex4.6 flex-mobile

我想通过用手指拖动它们来重新排列Flex移动应用中List的项目。

作为第一步,我复制了Adobe文档Using drag-and-drop with list-based controls中的示例 - 但是虽然他们的示例在Web应用程序中运行良好,但下面的移动应用程序中没有任何反应:

screenshot

为什么它不起作用(就像移动主题中缺少一些皮肤?)

有没有办法让它发挥作用(至少重新排序移动列表中的项目)?

下面是我尝试过的简单测试代码 - 只需将它放入一个新的空白(即没有导航栏)Flash Builder中的Flex移动项目:

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

1 个答案:

答案 0 :(得分:1)

我已经找到并尝试了this page上的超级解决方法。

只需从他的示例中复制类,然后将自定义itemRenderer添加到源列表中。

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

尊重作者!

结果如下:

enter image description here