4 Replies Latest reply on Dec 20, 2007 6:36 PM by Sreenivas R

    Manual Drag&Drop on Panel components

    Tikis_Mikis
      Ok people I have been following this example http://blogs.adobe.com/flexdoc/drag_and_drop/

      What the goal of my application will be to have a canvas on top of my application and one at the bottom. I will start off with a set of dynamically generated panels in the top or bottom canvas, doesn't really matter which. I want to be able to count how many panels are in each canvas and get the related id and name for each panel in each canvas.

      I have set up a canvas at the top where I pretty much just have the code from that example I linked to at the top except that my panels are generated on the fly and their count is variable. I am STRUGGLING to create a "two way drag and drop" between the two canvases (moving child panel from the top canvas to the bottom canvas and vice versa).

      I have found PLENTY of two way drop and drag examples but they all were about lists, datagrid, or tree components - components that already come built in with "drag and drop" and "two way drag and drop" but in my case the drag and drop is manually created.

      I am totally clueless as to the process. Can anyone point me in the right direction? I posted in the yahoo usergroups but so far my post has NOT been approved and it was posted like three hours ago.

      Any help is GREATLY appreciated.

      Here is part of my mxml:

      <mx:Canvas id="memberFilters"
      width="680" height="275"
      borderStyle="solid"
      backgroundColor="#B6FABB"
      x="10" y="10"
      dragEnter="doDragEnter(event);"
      dragDrop="doDragDrop(event);">
      </mx:Canvas>

      <mx:Canvas id="nonMemberFilters"
      width="680" height="275"
      borderStyle="solid"
      backgroundColor="#FBB7B7"
      x="10" y="325"
      dragEnter="doDragEnter(event);"
      dragDrop="doDragDrop(event);">
      </mx:Canvas>

      here is part of of my .as file:

      // Drag initiator event handler for
      // the title bar's mouseMove event.
      private function tbMouseMoveHandler(event:MouseEvent):void
      {
      var dragInitiator:Panel=Panel(event.currentTarget);
      var ds:DragSource = new DragSource();
      ds.addData(event.currentTarget, 'panel');

      // Update the xOff and yOff variables to show the
      // current mouse location in the Panel.
      xOff = event.currentTarget.mouseX;
      yOff = event.currentTarget.mouseY;

      // Initiate d&d.
      DragManager.doDrag(dragInitiator, ds, event);
      }

      // Function called by the canvas dragEnter event; enables dropping
      private function doDragEnter(event:DragEvent):void
      {
      DragManager.acceptDragDrop(Canvas(event.target));
      }

      // Function called by the Canvas dragDrop event;
      // Sets the panel's position,
      // "dropping" it in its new location.
      private function doDragDrop(event:DragEvent):void
      {
      // Compensate for the mouse pointer's location in the title bar.
      var tempX:int = event.currentTarget.mouseX - xOff;
      event.dragInitiator.x = tempX;

      var tempY:int = event.currentTarget.mouseY - yOff;
      event.dragInitiator.y = tempY;

      // Put the dragged panel on top of all other components.
      memberFilters.setChildIndex(Panel(event.dragInitiator), memberFilters.numChildren-1);
      }

      // Function called by the Canvas dragDrop event;
      // Sets the panel's position,
      // "dropping" it in its new location.
      private function doDragDrop(event:DragEvent):void
      {
      // Compensate for the mouse pointer's location in the title bar.
      var tempX:int = event.currentTarget.mouseX - xOff;
      event.dragInitiator.x = tempX;

      var tempY:int = event.currentTarget.mouseY - yOff;
      event.dragInitiator.y = tempY;

      // Put the dragged panel on top of all other components.
      nonMemberFilters.setChildIndex(Panel(event.dragInitiator), nonMemberFilters.numChildren-1);
      }

      // ##########################################################
      // ##########################################################
      // ##########################################################

      public function onAvailableFiltersResult(result:Array):void
      {
      phpData = new ArrayCollection(result);

      for(x=0; x<phpData.length; x++) {

      // create each new panel and add it to the parent canvas
      var filterData:Panel = new Panel();
      filterData.id = "id__" + phpData[x].data;
      filterData.title = phpData[x].label;
      filterData.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
      memberFilters.addChild(filterData);
      }
      }

      the code in the .as is my code along with the code from the link above
        • 1. Re: Manual Drag&amp;Drop on Panel components
          Sreenivas R Adobe Employee
          Here is the updated code ...

          I replaced the onAvailableFiltersResult with createPanels to create some 5 panels. You can replace it with onAvailableFiltersResult.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
          creationComplete="createPanels()">

          <mx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.managers.DragManager;
          import mx.containers.Panel;
          import mx.core.DragSource;
          import mx.events.DragEvent;

          // Variables used to hold the mouse pointer's location in the title bar.
          // Since the mouse pointer can be anywhere in the title bar, you have to
          // compensate for it when you drop the panel.
          public var xOff:Number;
          public var yOff:Number;

          // Drag initiator event handler for
          // the title bar's mouseMove event.
          private function tbMouseMoveHandler(event:MouseEvent):void
          {
          var dragInitiator:Panel=Panel(event.currentTarget);
          var ds:DragSource = new DragSource();
          ds.addData(event.currentTarget, 'panel');

          // Update the xOff and yOff variables to show the
          // current mouse location in the Panel.
          xOff = event.currentTarget.mouseX;
          yOff = event.currentTarget.mouseY;

          // Initiate d&d.
          DragManager.doDrag(dragInitiator, ds, event);
          }

          // Function called by the canvas dragEnter event; enables dropping
          private function doDragEnter(event:DragEvent):void
          {
          DragManager.acceptDragDrop(Canvas(event.target));
          }

          // Function called by the Canvas dragDrop event;
          // Sets the panel's position,
          // "dropping" it in its new location.
          private function doDragDrop1(event:DragEvent):void
          {
          // Compensate for the mouse pointer's location in the title bar.
          var tempX:int = event.currentTarget.mouseX - xOff;
          event.dragInitiator.x = tempX;

          var tempY:int = event.currentTarget.mouseY - yOff;
          event.dragInitiator.y = tempY;

          memberFilters.addChild(Panel(event.dragInitiator));
          // Put the dragged panel on top of all other components.
          memberFilters.setChildIndex(Panel(event.dragInitiator), memberFilters.numChildren-1);
          }

          // Function called by the Canvas dragDrop event;
          // Sets the panel's position,
          // "dropping" it in its new location.
          private function doDragDrop2(event:DragEvent):void
          {
          // Compensate for the mouse pointer's location in the title bar.
          var tempX:int = event.currentTarget.mouseX - xOff;
          event.dragInitiator.x = tempX;

          var tempY:int = event.currentTarget.mouseY - yOff;
          event.dragInitiator.y = tempY;

          nonMemberFilters.addChild(Panel(event.dragInitiator));
          // Put the dragged panel on top of all other components.
          nonMemberFilters.setChildIndex(Panel(event.dragInitiator), nonMemberFilters.numChildren-1);
          }

          // ##########################################################
          // ##########################################################
          // ##########################################################

          public function createPanels():void
          {

          for(x=0; x<5; x++) {

          // create each new panel and add it to the parent canvas
          var filterData:Panel = new Panel();
          filterData.id = "id__" + x;
          filterData.title = "Panel-" + x;
          filterData.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
          memberFilters.addChild(filterData);
          }
          }

          ]]>
          </mx:Script>

          <mx:Canvas id="memberFilters"
          width="680" height="275"
          borderStyle="solid"
          backgroundColor="#B6FABB"
          x="10" y="10"
          dragEnter="doDragEnter(event);"
          dragDrop="doDragDrop1(event);">
          </mx:Canvas>

          <mx:Canvas id="nonMemberFilters"
          width="680" height="275"
          borderStyle="solid"
          backgroundColor="#FBB7B7"
          x="10" y="325"
          dragEnter="doDragEnter(event);"
          dragDrop="doDragDrop2(event);">
          </mx:Canvas>

          </mx:Application>
          • 2. Re: Manual Drag&amp;Drop on Panel components
            atta707 Level 2
            i can apparently move a panel from one canvas to other without a problem. what's the problem you're trying to solve? Is it number of panels in a given canvas? Or is it something different?
            • 3. Re: Manual Drag&amp;Drop on Panel components
              Tikis_Mikis Level 1
              Sreenevas thank you so much for your solution so the key here is to make two different doDragDrop function one for each canvas and adding an addChild for the dragInitiator event. How simple that was.

              I wish I could post this somewhere as a tutorial so that people out there don't have a hard time doing stuff like this like I didn.

              Atta the problem was that I couldnt get the panels to drop onto another canvas...that is now fixed. Thank you very much.

              How did you guys get so good at this? I really really want to learn I'm a newbie and not the brightest cookie in the bunch.
              • 4. Re: Manual Drag&amp;Drop on Panel components
                Sreenivas R Adobe Employee
                You can contribute to the Flex CookBook or you can post your findings on a blog.

                You will also be good soon. Keep learning flash player side by side of Flex :)