Flex中针对非列表组件的复杂自定义拖放

时间:2013-05-01 11:48:08

标签: actionscript-3 drag-and-drop flex4 flash-builder

我目前正致力于Flex中的自定义拖放功能,我是flex和AS3的初学者,因此我遇到的问题对于更有经验的程序员来说可能是微不足道的:

所以我有一个小的flex 4应用程序,它有自定义标题的边框容器,这个自定义标题容器由几个部分组成,例如:标签,边框容器等......当我尝试拖放那个标题容器然后我不能抓住整个标题的容器,只能抓住它的一个部分(标签或边框),当我丢弃时,flex会抛出错误,该元素不属于同一组,我可以通过包装带有Group的标题容器但仍然启用了标题容器的部分,我不知道如何禁止它。

我知道这可能不是问题的最简单的解释,但也许有人已经遇到过这个问题,或者对此有一些经验,对此有任何帮助。

所以我有这样的自定义标题容器的布局:

----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也必须是可交换的。现在我已经设法让子组的子项可以交换,并且子组也可以相互交换但是......如何将组件放在所需的位置,例如:将项目B1放到该位置项目A1的位置(当我丢弃东西时,它总是作为容器的最后一个子项放置)但我希望能够将它放在任何位置。

这是一个有效的进展,我在设置中发布了可运行的代码,尽管由于问题的可读性而没有包含TitledContainer,如果你需要这个组件,请告诉我:

<?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, "wrapper" );
                DragManager.doDrag( dragItem, dragSource, evt );

            }

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

            }

            protected function handleDragDropSub( evt:DragEvent ):void
            {
                var dragItem:Object = evt.dragSource.dataForFormat( "wrapper" );
                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 A1" 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 A2" 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 3"  >
                                <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 A 4"  >
                                <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-->


        <!-- SECOND ROW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

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

            <!-- First Group --> 
            <titledContainer:TitledContainer  label="Group B" 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 B1" 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 B 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 B 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 B2" 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> <!-- Second row end-->



    </s:SkinnableContainer>

</s:Application>

请注意我是Flex和AS3的初学者,所以请温柔地对我说,

问题:

  1. 当点击自定义标题容器时,用户应该能够拖动整个组件,而不是标题,边框容器或标题容器内的任何其他内容。
  2. 能够将拖动的元素拖放到用户使用元素指向鼠标的位置,例如:要作为Sub Groub A的第一个子项删除的项目B1,并且可能显示有关物品将在掉落后着陆。
  3. 请对初学者保持温和,我不是要求你为我编写代码,而是指导如何正确地编写代码但欢迎代码示例和教程建议,谢谢大家。

0 个答案:

没有答案