拖放自定義標題邊框盒Flex 4點中的問題

希望有人柔性經驗將能夠給出的建議是：拖放自定義標題邊框盒Flex 4點中的問題

所以我有一個定製標題邊框容器小的Flex 4應用程序，我想能夠將它們拖放到容器之間，但是... d &處理flex組件時，d很簡單，但此自定義標題容器由幾個部分組成，例如：label，border container ...我嘗試拖放標題容器，然後我不能抓住整個標題容器，但只是其中一個部分（標籤或邊框），當我放棄然後flex引發錯誤，該元素不在同一組。

我知道這可能不是對問題最簡單的解釋，但也許有人已經遇到過這個問題，或者有了一些這方面的經驗，任何幫助表示讚賞。

嗨，我已經編輯我的問題，以提供更好的理解這個問題，所以我有自定義標題容器的像這樣的佈局：

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

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

II希望能夠交換集團A組和B組（也就是A組和B組子女）（子組A & B）必須可以互換，最後子組A & B的子女也必須可交換。現在我已經設法讓子組的子組交換能力，並且子組也可以彼此交換，但是... 有時，當我將子組A與子組B交換時，子組G在子組內部B.這是一個工作的進展情況和我張貼與我建立了可運行的代碼，但不包括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, "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組等內部
當單擊自定義標題容器用戶應該能夠拖動整個組件，而不是標題，或邊框容器或其他標題容器內部的內容。

請溫柔的初學者，我不要求你寫的代碼爲我，而是指導如何做正確，但代碼樣本的歡迎，謝謝大家。

來源

2013-04-26 Kugarek

您希望能夠在容器之間拖放** WHAT **？ Flex會拋出什麼錯誤？你能分享一些代碼嗎？也許是一個可運行的樣本。 – JeffryHouser 2013-04-26 15:27:54

嗨，我已經更新了這個問題，所以現在它更容易理解，請你看看，並可能幫助我一下，謝謝。 – Kugarek 2013-04-29 11:39:55

正確顯示對象問題

傳遞父定製容器的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決定的，通常這是階段，但我們將其稱之爲舞臺。

讓我們打電話給被拖動的對象拖動（是的，我在這個小時缺乏創造力）:)。

1）正確檢測拖動。

look detectMyContainer.

）網友的拖座標階段。

use localToGlobal.

3）如果競技場是不階段的座標映射到競技場。

use globalToLocal

4）拆下拖動從其父並添加到競技場。

use arena.addChild(drag)

5）將drag.x和drag.y設置爲舞臺映射座標。現在你有一個更深的父母一樣的地方拖...

6）開始阻力

7）聽MOUSE_UP開始拖動

use drag.startDrag(...)

8）當鼠標上升，看拖的下降目標...現在有

first stopDrag()

9）檢測的DropTarget的approp相反，它可能不是你猜到的，所以看看它的班級和家長等，以確定是否有一個有效的和哪個。 10）如果dropTarget不存在，則添加將拖回到原始父級，並設置其原始座標...（當你習慣了事情，你會補間動畫，我打賭）。

11）現在拖的 COORDS映射舞臺DropTarget的

if arena is not stage make a localToGlobal for drag in arena make a globalToLocal for drag global to dropTarget local

12）從舞臺刪除阻力並添加到其新的父的DropTarget。

use dropTarget.addChild(drag)

13）將drag.x和drag.y設置爲dropTarget映射座標。

這就是所有，這是當你的代碼這個短，不要害怕......

我祝你好運。

來源

2013-04-26 20:56:08 Ihsan

嗨Ihsan，謝謝你的回答，我相信它提供瞭解決這個問題的辦法，我會跟着你指導和回報，謝謝 – Kugarek 2013-04-29 08:40:08

拖放自定義標題邊框盒Flex 4點中的問題

回答

相關問題