Wie man Panel in Flex

Question

ziehen kann Ich gebe meinen Benutzern die Möglichkeit, Elemente zu erstellen. Die Artikel erstellen Dialoge wie:

<s:Panel id="postitNoteCreatePanel" 
      horizontalCenter="0" verticalCenter="0" 
      ... 

Wie kann ich Panel ziehbar, so dass Benutzer sie um die Seite bewegen kann, so dass es nicht andere Gegenstände blockiert

Answer 1

Sie können versuchen:

hinzufügen Maus nach unten und Maus nach oben eventlistner zum titleBar der Platte und zwei Funktionen hinzufügen:

private function handleDown(event:MouseEvent):void{ 
     this.startDrag(); 
    } 

    private function handleUp(event:MouseEvent):void{ 
     this.stopDrag(); 
    } 

„this“ ist es, die die Platte beziehen.

Answer 2

Sie können dem Panel einen Ereignis-Listener hinzufügen, d. H. Bei mousedown können Sie die startDrag -Eigenschaft des Panels auf true setzen, und beim MouseUp (nach MouseDown) können Sie das Panel nicht mehr ziehen.

Dies ist der einfachste Weg, dies zu tun. Dies würde jedoch bedeuten, dass der Benutzer in der Lage sein wird, das Panel mit einem beliebigen Teil des Panels zu ziehen.

Answer 3

Der einfachste Weg, dies zu tun ist meiner Meinung nach, ersetzen Sie Ihr s: Panel mit einem s: TitleWindow. Die TitleWindow-Skin fügt der Titelleiste einen Bereich hinzu, in dem sie gezogen werden kann, und die TitleWindow-Klasse verfügt über Code zum Ziehen. Dadurch können Sie ziehen, ohne dass Sie einen Handler programmieren müssen. Ich hoffe, das hilft.

Answer 4

Hier ist Beispiel und Code für ziehbare (und größenveränderbare) Flex Panels, älteres SDK obwohl !!

http://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.html

Answer 5

Code blies Ihnen helfen können. Ich benutze diesen Code in Flex 4.5. Es funktioniert perfekt.

http://code.google.com/p/force-explorer/source/browse/trunk/Flex/Explorer/src/components/DraggablePanel.as?r=8

package components 
{ 
     import flash.events.MouseEvent; 

     import mx.managers.DragManager; 

     import spark.components.Group; 
     import spark.components.Panel; 

     /** 
     * A simple extension of the Spark Panel component 
     * that enables dragging. 
     */ 
     public class DraggablePanel extends Panel 
     { 
       //-------------------------------------- 
       // Constructor 
       //-------------------------------------- 

       public function DraggablePanel() 
       { 
         super(); 
       } 

       //-------------------------------------- 
       // Skin Parts 
       //-------------------------------------- 

       /** 
       * The skin part that represents the title bar of the underlying Panel. 
       *  NOTE: The default PanelSkin already has this, it's just not defined as a skinPart in the Panel class. 
       * We want it so that we can capture dragging. 
       */ 
       [SkinPart(required="true")] 
       public var topGroup:Group; 

       //-------------------------------------- 
       // Overridden Methods 
       //-------------------------------------- 

       protected override function partAdded(partName:String, instance:Object) : void 
       { 
         super.partAdded(partName, instance); 

         if (instance == topGroup) 
         { 
           Group(instance).addEventListener(MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler); 
           Group(instance).addEventListener(MouseEvent.MOUSE_UP, topGroup_mouseUpHandler); 
         } 
       } 

       protected override function partRemoved(partName:String, instance:Object) : void 
       { 
         super.partRemoved(partName, instance); 

         if (instance == topGroup) 
         { 
           Group(instance).removeEventListener(MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler); 
           Group(instance).removeEventListener(MouseEvent.MOUSE_UP, topGroup_mouseUpHandler); 
         } 
       } 

       //-------------------------------------- 
       // Event Handlers 
       //-------------------------------------- 

       protected function topGroup_mouseDownHandler(event:MouseEvent):void 
       { 
         if (!DragManager.isDragging) 
           startDrag(); 
       } 

       protected function topGroup_mouseUpHandler(event:MouseEvent):void 
       { 
         stopDrag(); 
       } 
     } 
} 

---

http://code.google.com/p/force-explorer/source/browse/trunk/Flex/Explorer/src/components/DraggablePanel.as?r=8