Adobe Air：drag&删除分组的组件 [英] Adobe Air: drag & drop grouped components

问题描述

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

I am trying to create Adobe Air application in which I require the components below:

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

Allow me to elaborate this mockup:

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

There are 2 panels on each side, and the items inside these panels can be drag and drop on each other, just like moving items around in 2 folders. Several tutorials have shown that a list with

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

将执行此工作。但是，这里是关键部分。我希望我的列表中的项目具有这样的结构，我在左边有一个图像，右边是TextArea，如上所述。当用户拖动这个结构化项目时，我希望整个事情可以一起走到另一边，无论用户最初拖动这个结构化项目 - 这意味着如果用户从图像中点击并将其拖放到另一方面，这个结构化项目将出现在另一边。如果用户从TextArea拖动，同样的事情应该发生。

will do the job. However, here comes the crucial part. I want my item in the list to have such a structure that I have an image on the left and TextArea on the right as specified above. When the user drags this "structured item", I want the whole thing to go together to another side, regardless of where the user initially drags this "structured item" - meaning if the user clicks from the image and drag and drop it to the other side, this "structured item" will appear on the other side. Should the user drags from the TextArea, the same thing should happen.

TextArea是滚动面板内的结构化项目的一部分，也应允许用户滚动其文本。

The TextArea, a part of this "structured item", which is inside the scrolling panel, should also allow the user to scroll its text as well.

那么我们如何在Adobe Air中这样做？

So how do we do this in Adobe Air?

推荐答案

Flextras是对的。总是最好表现出你为尝试不同的事情而努力尝试自己弄清楚的努力。但是，今天我还有一个很好的心情，所以在这里你去：）

Flextras is right. It is always best to show the effort you have put in to trying different things and trying to figure it out on your own. However, I am in a good mood yet again today so here you go :)

主要应用：

Main application:

        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：

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>

这篇关于Adobe Air：drag&删除分组的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！