Adobe AIR的：拖＆放;降组合的部件 [英] Adobe Air: drag & drop grouped components

问题描述

我想创造一个我需要的组件如下Adobe AIR应用程序：

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

让我来阐述这个小样：

有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图像作为上述规定。当用户拖动这个结构化产品，我想整个事情，一起去到另一边，无论在哪里，用户最初拖动这个结构化产品 - 如果用户点击的形象，将其拖放到意另一侧，这种结构化的产品将出现在另一侧。如果用户从文本区拖动，同样的事情应该发生。

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.

的文本区，这种结构化项目的一部分，这是滚动面板内，还应当允许用户滚动其文字以及

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的：拖＆放;降组合的部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！