Adobe Air：拖放分组组件答案

【问题标题】：Adobe Air: drag & drop grouped componentsAdobe Air：拖放分组组件
【发布时间】：2012-05-09 15:12:52
【问题描述】：

我正在尝试创建需要以下组件的 Adobe Air 应用程序：

请允许我详细说明这个模型：

每侧有 2 个面板，这些面板内的项目可以相互拖放，就像在 2 个文件夹中移动项目一样。几个教程显示了一个带有

的列表

dragEnabled = "true"
dropEnabled = "true"
dragMoveEnabled = "true"

将完成这项工作。然而，关键的部分来了。我希望列表中的项目具有这样的结构，即左侧有图像，右侧有 TextArea，如上所述。当用户拖动这个“结构化项目”时，我希望整个事情一起走到另一边，无论用户最初拖动这个“结构化项目”的位置 - 这意味着如果用户从图像中单击并将其拖放到另一边，这个“结构化项目”会出现在另一边。如果用户从 TextArea 拖动，应该会发生同样的事情。

TextArea 是这个“结构化项目”的一部分，位于滚动面板内，也应该允许用户滚动其文本。

那么我们如何在 Adobe Air 中做到这一点？

【问题讨论】：

应该不是问题，尽管您可能会在文本区域尝试区分用户突出显示文本和尝试拖动组时遇到问题。我会在午餐后一两个小时内运行一些测试并得到一些示例代码。
@www.Flextras.com，在我重新阅读Adobe文档并再次浏览我的代码后，我发现我犯了一个愚蠢的逻辑错误。

标签： apache-flex drag-and-drop air flex4 flex-spark

【解决方案1】：

Flextras 是对的。最好的办法是展示您为尝试不同的事情并尝试自己解决问题所付出的努力。不过，我今天心情又好了，所以你去吧:)

主要应用：

        import mx.collections.ArrayCollection;

        [Bindable]
        private var list1Array:ArrayCollection = new ArrayCollection([
            {text: "a"},
            {text: "b"},
            {text: "c"},
            {text: "d"},
            {text: "e"}]);
        [Bindable]
        private var list2Array:ArrayCollection = new ArrayCollection();

    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup>
    <s:List dataProvider="{list1Array}" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" itemRenderer="listItemRenderer"/>
    <s:List dataProvider="{list2Array}" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" itemRenderer="listItemRenderer"/>
</s:HGroup>
</s:Application>

listItemRenderer：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">

<fx:Script>
    <![CDATA[
        private function updateData():void
        {
            data.text = textArea.text;
        }
    ]]>
</fx:Script>
<s:HGroup>
    <mx:Image width="50" height="50"/>
    <s:TextArea id="textArea" text="{data.text}" change="updateData()"/>
</s:HGroup> 
</s:ItemRenderer>

【讨论】：