我目前正致力于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的初学者,所以请温柔地对我说,
问题:
请对初学者保持温和,我不是要求你为我编写代码,而是指导如何正确地编写代码但欢迎代码示例和教程建议,谢谢大家。