Actionscript 3 在Flex 4问题中拖放自定义标题边框框

希望有经验的人能够提供以下建议：

所以我有一个小Flex4应用程序，它有自定义标题的边框容器，我希望能够在容器之间拖放它们，但是。。。处理flex组件时，d&d很简单，但这个自定义标题容器由几个部分组成，例如：标签、边框容器等等。。。当我尝试拖放标题容器时，我无法抓取整个标题容器，而只能抓取其中一个部分（标签或边框框），当我拖放时，flex会抛出错误，指出元素不在同一组中

我知道这可能不是问题的最简单的解释，但可能有人已经遇到了这个问题，或者对此有一些经验，感谢任何帮助

您好，我已经编辑了我的问题，以便更好地理解问题，因此我有自定义标题容器的布局，如下所示：

----Group A --------------------------------
|                                           |
|   --- Sub Group A --------------------    |
|   |                                   |   |
|   |   --- Item A1 --   --Item A2---   |   |
|   |   |         |     |            |  |   |
|   |   |         |     |            |  |   |
|   |   |-------------   ------------   |   |
|   |                                   |   |
|   |-----------------------------------    |
|                                           |
|-------------------------------------------

----Group B --------------------------------
|                                           |
|   --- Sub Group B --------------------    |
|   |                                   |   |
|   |   --- Item B1 --   --Item B2---   |   |
|   |   |         |      |           |  |   |
|   |   |         |      |           |  |   |
|   |   |-------------   ------------   |   |
|   |                                   |   |
|   |-----------------------------------    |
|                                           |
|-------------------------------------------

我希望能够将A组与B组交换，A组和B组（子组A和B）的子组必须能够相互交换，最后A和B子组的子组也必须能够交换。现在我已经设法使子组的子组可以交换，并且子组也可以相互交换，但是。。。 有时，当我将子组A与子组B交换时，子组A会降落在子组B内。这是一个工作过程，虽然标题容器不包括在内，但我会在设置中发布可运行代码，如果您需要此组件，请告诉我：

    <?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" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:titledContainer="titledContainer.*"
               >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.core.DragSource;
            import mx.core.IUIComponent;
            import mx.core.IVisualElement;
            import mx.events.DragEvent;
            import mx.managers.DragManager;

            import spark.components.SkinnableContainer;         


            //-------------------------------------------------------------------
            // ITEM BOXES DRAG FUNCTIONS
            //--------------------------------------------------------------------

            private function handleStartDrag( evt:MouseEvent ):void
            {
                // grab the item renderer and relevant data
                var dragItem:IUIComponent = evt.target as IUIComponent;
                var dragSource:DragSource = new DragSource();
                dragSource.addData( dragItem, "item" );
                DragManager.doDrag( dragItem, dragSource, evt );

            }

            protected function handleDragEnter( evt:DragEvent ):void
            {
                if( evt.dragSource.hasFormat( "item" ) )
                    DragManager.acceptDragDrop( evt.target as IUIComponent );

            }

            protected function handleDragDrop( evt:DragEvent ):void
            {
                var dragItem:Object = evt.dragSource.dataForFormat( "item" );
                var dragItemOwner:SkinnableContainer = ( dragItem.owner as
                    SkinnableContainer );
                dragItemOwner.removeElement( dragItem as IVisualElement );
                var targetOwner:SkinnableContainer = ( evt.target as
                    SkinnableContainer );
                targetOwner.addElement( dragItem as IVisualElement );
            }

            //-------------------------------------------------------------------
            // SUB GROUPS CONTAINERS DRAG FUNCTIONS
            //--------------------------------------------------------------------


            private function handleStartDragSub( evt:MouseEvent ):void
            {
                // grab the item renderer and relevant data
                var dragItem:IUIComponent = evt.target as IUIComponent;
                var dragSource:DragSource = new DragSource();
                dragSource.addData( dragItem, "item" );
                DragManager.doDrag( dragItem, dragSource, evt );

            }

            protected function handleDragEnterSub( evt:DragEvent ):void
            {
                if( evt.dragSource.hasFormat( "item" ) )
                    DragManager.acceptDragDrop( evt.target as IUIComponent );

            }

            protected function handleDragDropSub( evt:DragEvent ):void
            {
                var dragItem:Object = evt.dragSource.dataForFormat( "item" );
                var dragItemOwner:SkinnableContainer = ( dragItem.owner as
                    SkinnableContainer );
                dragItemOwner.removeElement( dragItem as IVisualElement );
                var targetOwner:SkinnableContainer = ( evt.target as
                    SkinnableContainer );
                targetOwner.addElement( dragItem as IVisualElement );
            }

        ]]>
    </fx:Script>

    <!-- MAIN CONTAINER ~~~~~~~~~~~~~~~~~~~~~~-->
    <s:SkinnableContainer x="50" y="50" width="100%" height="100%" >
        <s:layout>
            <s:VerticalLayout />
        </s:layout>


        <!-- FIRST ROW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

        <s:SkinnableContainer width="100%" >
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>

            <!-- First Group --> 
            <titledContainer:TitledContainer  label="Group A" width="50%" dragEnter="handleDragEnterSub(event)" dragDrop="handleDragDropSub(event)">
                <titledContainer:layout>
                    <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                </titledContainer:layout>

                <s:Group width="100%"  mouseDown="handleStartDragSub(event);"  >
                    <s:layout>
                        <s:HorizontalLayout />
                    </s:layout>

                    <titledContainer:TitledContainer  label="Sub Group A" width="500" dragEnter="handleDragEnter(event)" dragDrop="handleDragDrop(event)">
                        <titledContainer:layout>
                            <s:HorizontalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                        </titledContainer:layout>

                        <s:Group mouseDown="handleStartDrag(event);">

                            <titledContainer:TitledContainer  label="Item A 1"  >
                                <titledContainer:layout>
                                    <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                                </titledContainer:layout>
                            </titledContainer:TitledContainer>

                        </s:Group> <!-- Item 1 end-->

                        <s:Group mouseDown="handleStartDrag(event);">

                            <titledContainer:TitledContainer  label="Item A 2"  >
                                <titledContainer:layout>
                                    <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                                </titledContainer:layout>
                            </titledContainer:TitledContainer>

                        </s:Group> <!-- Item 2 end-->

                    </titledContainer:TitledContainer><!-- Front cover 2 end-->

                </s:Group>

                <s:Group width="100%"  mouseDown="handleStartDragSub(event);"  >
                    <s:layout>
                        <s:HorizontalLayout />
                    </s:layout>

                    <titledContainer:TitledContainer  label="Sub Group B" width="500" dragEnter="handleDragEnter(event)" dragDrop="handleDragDrop(event)">
                        <titledContainer:layout>
                            <s:HorizontalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                        </titledContainer:layout>

                        <s:Group mouseDown="handleStartDrag(event);">

                            <titledContainer:TitledContainer  label="Item B3"  >
                                <titledContainer:layout>
                                    <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                                </titledContainer:layout>
                            </titledContainer:TitledContainer>

                        </s:Group> <!-- Item 3 end-->

                        <s:Group mouseDown="handleStartDrag(event);">

                            <titledContainer:TitledContainer  label="Item B4"  >
                                <titledContainer:layout>
                                    <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="10"/>
                                </titledContainer:layout>
                            </titledContainer:TitledContainer>

                        </s:Group> <!-- Item 4 end-->

                    </titledContainer:TitledContainer><!-- Front cover 3 end-->



                </s:Group> 

            </titledContainer:TitledContainer><!-- Front cover 1 end-->

        </s:SkinnableContainer> <!-- first row end-->


    </s:SkinnableContainer>

</s:Application>

请注意，我是一名Flex和AS3初学者，所以请对我温柔一些

问题在于：

能够相互交换组、子组和项目（维护层次结构）并禁止错误放置，即：子组A位于子组B内等

单击自定义标题容器时，用户应该能够拖动整个组件，而不是标题、边框容器或标题容器内的任何其他内容

---

请对初学者温和一点，我不是要求你为我写代码，而是指导如何正确地做，但欢迎代码示例，谢谢大家

纠正显示对象问题

将父自定义容器传递给startDrag，而不是其元素。要做到这一点，您必须像往常一样通过收听

MOUSE_DOWN, MOUSE_MOVE, 

事件

我想你已经这么做了，但是按照你写的例子

e.target.startDrag(false, new Rectangle(bla, bla));

而不是写作

myCustomContainer.startDrag(false, new Rectangle(bla,bla));

要做到这一点，有两个先决条件：

1） 如果鼠标在子控件上移动，请查找正在进行拖动的正确容器。 这可能相对容易，如果控件是直接的displayObject子体，在显示列表父树上向上移动，只需检查容器类就足够了。检测父级的一个非常基本的代码示例如下：

public function detectMyContainer(t: DisplayObject){

while((t)&&(t !== root)){
    if(t is YourCustomContainer){
         return(t);
    }    
    t = DisplayObject(t).parent;
}
return(null);
}

2） 您不应该在容器的子控件中阻止鼠标下移和鼠标移动事件传播，因为这将使容器变聋

现在，这将部分解决您的问题，这意味着到目前为止，您正在设法找到正确的父项并将其移动，而不是转包

纠正小组问题

开始拖动displayObject时，应将其放到同一父对象上

如果没有，正如你已经看到的，as3会对你大喊大叫

如果要在不同的父对象之间移动显示对象，应覆盖此行为，您必须遵循以下步骤：

首先，您应该决定最终的父级DisplayObjectContainer，它包含不同的父级，您可以将孩子移动到不同的父级，通常这是阶段，但我们称之为竞技场

 use localToGlobal.

 use globalToLocal

 use arena.addChild(drag)

让我们调用正在拖动的对象拖动（是的，我现在缺乏创造力）：）

1） 正确检测拖动

 look detectMyContainer.

2） 将拖动坐标映射到阶段

 use localToGlobal.

 use globalToLocal

 use arena.addChild(drag)

3） 如果竞技场为非舞台将坐标映射到竞技场

 use localToGlobal.

 use globalToLocal

 use arena.addChild(drag)

4） 移除从其父级拖动，然后添加到竞技场

 use localToGlobal.

 use globalToLocal

 use arena.addChild(drag)

5） 将drag.x和drag.y设置为竞技场贴图坐标。现在