3 Replies Latest reply on Dec 21, 2007 7:32 AM by Tikis_Mikis

    Drag and Drop Strange behavior/slow down

    Tikis_Mikis Level 1
      Hello there! Thanks to those who were kind and knowledgeable enough to help me out with the drag and drop problem I had - this is where the post is located:

      http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1322875&enterthread=y

      This post is a follow up to that original post. Every thing was fine until I changed my layout in my flex app. I increased the width of the entire app, added new panels and canvas for form to edit the information for each drag and drop panel I dynamically created.

      Everything is fine except one very annoying problem. When the app loads for the first time OR when say you have various tabs open in FireFox and you go to another tab then come back to the tab containing the Flex app, the first panel you click on to drag and drop, as soon as you begin to drag the dragging motions suffers from EXTREME slow down. Once you drop that panel you can drag and drop that panel or other panels at normal speed like nothing is wrong. If I refresh the page the slow down happens again for the first panel I decided to drag and drop but then its fine once I try it again.

      This issue is not keeping me from completing my project as a whole but it is INCREDIBLY ANNOYING and something I am going to have to fix regardless, sooner or later.

      Any thoughts? Following is my code which is practically identical to the code in the post I linked above.

      ##################################################################
      ##################################################################
      ##################################################################

      Here is my AS code:

      // ===========================================
      // library import
      import mx.collections.ArrayCollection;
      import flash.net.Responder;
      import mx.rpc.events.FaultEvent;
      import mx.controls.TextArea;
      import mx.controls.Alert;

      import mx.managers.DragManager;
      import mx.core.DragSource;

      import mx.containers.Panel;

      import mx.events.*;

      // ===========================================

      [Bindable]
      public var phpData:ArrayCollection;


      [Bindable]
      private var filterEditObj:Object = new Object();

      // new remoting connection object
      public var gateway:RemotingConnection;

      // 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;

      /**
      * function to set the initial data in the flex form for a filter set
      */
      public function initApplication():void
      {
      // get the gateway url location to process the remote data requests
      var gatewayUrl:String = Application.application.parameters.gatewayUrl;
      //Alert.show(gatewayUrl1);
      if (gatewayUrl == '') {
      gatewayUrl = ' http://project/web/backend_dev.php/gateway/amfphp';
      }

      // set up the connection gateway to remotely connect to the AMPFPHP services
      gateway = new RemotingConnection(gatewayUrl);
      // get the filter sets to bind them to the the list id="filterSetList"
      gateway.call("FilterSets.getAvailableFilters", new Responder(onAvailableFiltersResult, onFault), 4);
      }

      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 = "filter_id__" + phpData[x].data;
      filterData.title = phpData[x].label;
      filterData.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
      memberFilters.addChild(filterData);
      }
      }

      // Drag initiator event handler for
      // the title bar's mouseMove event.
      private function tbMouseMoveHandler(event:MouseEvent):void
      {
      // create the filterEditObj in order to display its data in the Filter Settings Edit form
      // - form id =
      filterEditObj = Object(Panel(event.currentTarget));

      //Alert.show(filterEditObj.id);

      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 doDragDropMemberCanvas(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;

      // drop a child if it is dragged into the canvas
      memberFilters.addChild(Panel(event.dragInitiator));
      // Put the dragged panel on top of all other components.
      memberFilters.setChildIndex(Panel(event.dragInitiator), memberFilters.numChildren-1);

      // function call to update the filter set
      //updateFilterSet();
      }

      // Function called by the Canvas dragDrop event;
      // Sets the panel's position,
      // "dropping" it in its new location.
      private function doDragDropNonMemberCanvas(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;


      // drop a child if it is dragged into the canvas
      nonMemberFilters.addChild(Panel(event.dragInitiator));
      // Put the dragged panel on top of all other components.
      nonMemberFilters.setChildIndex(Panel(event.dragInitiator), nonMemberFilters.numChildren-1);

      // function call to update the filter set
      //updateFilterSet();
      }

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

      public function onFault(fault:FaultEvent):void
      {
      Alert.show(fault.fault.faultString + "\n" + fault.fault.faultDetail, fault.fault.faultCode.toString());
      }
        • 1. Re: Drag and Drop Strange behavior/slow down
          Tikis_Mikis Level 1
          Here is my mxml:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApplication()"
          layout="absolute"
          width="1180"
          height="496">

          <mx:Script source="DragDrop.as" />

          <!-- -->
          <!-- panel to display all filters that can be dragged into the filters graph -->
          <mx:Panel x="10" y="10" width="228" height="232" layout="absolute" title="Filters" fontSize="11">
          <mx:Canvas id="nonMemberFilters"
          width="100%" height="100%"
          borderStyle="solid"
          backgroundColor="#FBB7B7"
          x="0" y="0"
          dragEnter="doDragEnter(event);"
          dragDrop="doDragDropNonMemberCanvas(event);">
          </mx:Canvas>
          </mx:Panel>

          <!-- panel to display all tiers that can be dragged into the filters graph
          <mx:Panel x="10" y="252" width="228" height="232" layout="absolute" title="Tiers" fontSize="11">
          <mx:Canvas id="nonMemberFilters0"
          width="100%" height="100%"
          borderStyle="solid"
          backgroundColor="#FBB7B7"
          x="0" y="0">
          <!-dragEnter="doDragEnter(event);"
          dragDrop="doDragDropNonMemberCanvas(event);"-
          </mx:Canvas>
          </mx:Panel>-->

          <!-- canvas that holds the graph of the filters and tiers in a filter set -->
          <mx:Canvas id="memberFilters"
          width="650" height="474"
          borderStyle="solid"
          backgroundColor="#B6FABB"
          x="246" y="10"
          dragEnter="doDragEnter(event);"
          dragDrop="doDragDropMemberCanvas(event);" >
          </mx:Canvas>

          <!-- filter and tier edit form
          <mx:Panel width="264" height="474"
          x="904" y="10"
          layout="absolute"
          title="Filter Settings Edit">
          <mx:Label x="10" y="5" text="Instance Name:" fontWeight="bold"/>
          <mx:TextInput x="114" y="3" id="instance_name" height="22" fontSize="9" width="120" text="{filterEditObj.id}"/>
          <mx:Label x="10" y="31" text="Filter Name:" fontWeight="bold"/>
          <mx:Label x="10" y="57" text="Class:" fontWeight="bold"/>
          <mx:TextInput x="114" y="29" id="filter_name" height="22" fontSize="10" width="120" editable="false">
          </mx:TextInput>
          <mx:TextInput x="114" y="55" id="class_name" height="22" fontSize="10" width="120" editable="false">
          </mx:TextInput>
          <mx:Label x="10" y="83" text="Description:" fontWeight="bold"/>
          <mx:TextArea x="10" y="100" width="224" height="51" id="description"/>
          <mx:Label x="10" y="159" text="Settings" fontWeight="bold" fontSize="11"/>
          <mx:Canvas x="0" y="176" width="244" height="203" id="dynamic_settings">
          </mx:Canvas>
          <mx:Button x="89" y="402" label="Update"/>
          </mx:Panel>-->

          </mx:Application>
          • 2. Re: Drag and Drop Strange behavior/slow down
            Tikis_Mikis Level 1
            OK one more thing that I just noticed with my app is that the whole app moves either left a couple of pixels or right a couple of pixels depending on where I place a dragged and dropped panel....Any way to set it so that my app stays put/fixed? I'm so new to Flex and I'm still trying to figure out the best practices and default settings to create the most stable apps....