3 Replies Latest reply on Feb 24, 2008 11:15 AM by aprildavid

    flex 2 drag and drop for dynamical object

    aprildavid Level 1
      In my case, all the swf files/image are dynamically loaded. It is hard to do drag and drop. And I couldn't find any document on that. I have left panel, and a right Canvas. I want to drag the image from left to right canvas, and copy the swfObject to right Canvas. But it failed and canvas can't detect drop event at all, struggled for several days.

      A lot of thanks!

      Following is the code:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:cmp="PlanUI.*" creationComplete="init()">
      <mx:Style source="2dStyle.css"/>
      <mx:Script>
      <![CDATA[
      import mx.containers.HDividedBox;
      import mx.containers.HBox;
      import mx.containers.VBox;
      import PlanUI.SelectPanel;
      import PlanUI.designCanvas;
      import PlanUI.floorView;
      public function init():void
      {
      var hBox:HDividedBox=new HDividedBox();
      hBox.percentHeight=100;
      hBox.percentWidth=100;

      var selectUI:SelectPanel=new SelectPanel();
      selectUI.percentHeight=100;
      selectUI.percentWidth=30;
      hBox.addChild(selectUI);
      /*var view:floorView=new floorView();
      view.percentHeight=100;
      view.percentWidth=70;
      hBox.addChild(view);*/

      var dc:designCanvas=new designCanvas();
      dc.percentHeight=100;
      dc.percentWidth=100;
      hBox.addChild(dc);

      this.addChild(hBox);

      }
      ]]>
      </mx:Script>
      </mx:Application>


      package PlanUI
      {
      import mx.containers.Canvas;
      import mx.controls.SWFLoader;
      import flash.events.Event;
      import mx.controls.Alert;
      import mx.containers.Panel;
      import mx.core.UIComponent;
      import mx.controls.Image;
      import flash.net.URLRequest;
      import flash.display.Loader;
      import flash.display.Bitmap;
      import flash.display.Sprite;
      import mx.events.DragEvent;
      import mx.managers.DragManager;


      public class designCanvas extends Canvas
      {
      private var swfLoader:SWFLoader;
      private var imgArr:Array=new Array();


      public function designCanvas():void
      {
      this.percentHeight=100;
      this.percentWidth=100;
      this.alpha=1;

      swfLoader=new SWFLoader();
      // var url:String=" http://127.0.0.1/3com_8750.swf";
      var url:String=" http://127.0.0.1/apache_pb22.gif";
      swfLoader.load(url);
      swfLoader.addEventListener("complete",addToCanvas);
      this.addEventListener("dragEnter",doDragEnter);
      this.addEventListener("dragDrop",doDragDrop);

      }

      public function addToCanvas(e:Event):void
      {
      if (swfLoader.content == null)
      {
      imgArr=null;
      return;
      }
      var image:Image=new Image();
      image.addChild(swfLoader.content);
      imgArr.push(image);
      updateDisplayList(this.width, this.height);

      }
      private function doDragEnter(event:DragEvent):void
      {
      DragManager.acceptDragDrop(Canvas(dropTarget));
      }

      private function doDragDrop(event:DragEvent):void
      {
      // Get the data identified by the color format from the drag source.
      var data:Image =Image( event.dragSource.dataForFormat('image'));
      // Set the canvas color.
      imgArr.push(data);
      data.x=100;
      data.y=100;
      this.addChild(data);
      updateDisplayList(this.width, this.height);

      }


      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
      this.removeAllChildren();
      if (imgArr == null)
      return;
      for(var i:int=0;i<imgArr.length;i++)
      {
      var image:Image=Image(imgArr );
      image.x=100+100*i;
      image.y=200;
      image.scaleX = UIConst.PLAN_SCALE;
      image.scaleY=UIConst.PLAN_SCALE
      this.addChild(image);
      }


      }

      }
      }

      package PlanUI
      {
      import mx.controls.Image;
      import mx.containers.Panel;
      import flash.events.Event;
      import mx.controls.SWFLoader;
      import flash.events.MouseEvent;
      import mx.events.DragEvent;
      import mx.core.DragSource;
      import mx.containers.Canvas;
      import mx.managers.DragManager;
      import flash.display.BitmapData;
      import flash.display.Bitmap;

      public class SelectPanel extends Panel
      {
      private var image:Image=new Image();
      private var swfLoader:SWFLoader;

      public function SelectPanel()
      {
      this.percentHeight=100;
      this.percentWidth=100;
      this.alpha=1;
      image.alpha=1;
      image.maintainAspectRatio = false;
      image.scaleContent = true;

      swfLoader=new SWFLoader();
      var url:String=" http://127.0.0.1/apache_pb.gif";
      // var url:String=" http://127.0.0.1/apache_pb22.gif";
      swfLoader.load(url);
      swfLoader.addEventListener("complete",addToPanel);

      }

      public function addToPanel(e:Event):void
      {
      if (swfLoader.content == null)
      {
      image=null;
      return;
      }

      image.addChild(swfLoader.content);
      image.addEventListener("mouseMove",dragIt);
      this.addChild(image);

      }

      private function dragIt(event:MouseEvent):void
      {
      var dragInitiator:Image=Image(event.currentTarget);
      var ds:DragSource = new DragSource();
      ds.addData(dragInitiator, "image");
      var imageProxy:Image = new Image();
      imageProxy.source=dragInitiator;
      imageProxy.height=10;
      imageProxy.width=10;


      DragManager.doDrag(dragInitiator, ds, event, imageProxy,0,0,1.0);
      }




      }
      }

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:cmp="PlanUI.*" creationComplete="init()">
      <mx:Style source="2dStyle.css"/>
      <mx:Script>
      <![CDATA[
      import mx.containers.HDividedBox;
      import mx.containers.HBox;
      import mx.containers.VBox;
      import PlanUI.SelectPanel;
      import PlanUI.designCanvas;
      import PlanUI.floorView;
      public function init():void
      {
      var hBox:HDividedBox=new HDividedBox();
      hBox.percentHeight=100;
      hBox.percentWidth=100;

      var selectUI:SelectPanel=new SelectPanel();
      selectUI.percentHeight=100;
      selectUI.percentWidth=30;
      hBox.addChild(selectUI);
      /*var view:floorView=new floorView();
      view.percentHeight=100;
      view.percentWidth=70;
      hBox.addChild(view);*/

      var dc:designCanvas=new designCanvas();
      dc.percentHeight=100;
      dc.percentWidth=100;
      hBox.addChild(dc);

      this.addChild(hBox);

      }
      ]]>
      </mx:Script>
      </mx:Application>



        • 2. Re: flex 2 drag and drop for dynamical object
          VarioPegged Level 2
          When working with drag and drop, troubleshoot starting with the most obvious: Where exactly is the Canvas you're dropping onto and how large is it. Give the Canvas a temporary red background (myCanvas.setStyle("backgroundColor", "#FF0000")) to see exactly where it is on the stage. If you can't see it after you've changed the background color, chances are you can't drop anything onto it either.

          Glancing over your code I see a couple things:
          1. In DesignCanvas, you don't define the dropTarget variable, which is supposed to be a reference to the DesignCanvas.
          private function doDragEnter(event:DragEvent):void
          {
          var dropTarget:Canvas = this;
          DragManager.acceptDragDrop(dropTarget);
          }
          2. Your override of updateDisplayList() doesn't include super.updateDisplayList(unscaledWidth, unscaledHeight);
          I'd comment out your complete updateDisplayList() override and troubleshoot the drop target first, then you can start adding the other functionality and see if it works as you'd like.

          P.S. Just as a best practice, start your classes with uppercase and variables and functions lowercase, so DesignCanvas, not designCanvas.

          TS
          • 3. Re: flex 2 drag and drop for dynamical object
            aprildavid Level 1
            Thank you very much.

            It is a useful debug tip to set background color for canvas to know where is the drop target. Before that, I tried to drop the target doesn't belong to the canvas at all.