2 Replies Latest reply on Feb 22, 2008 6:04 PM by aprildavid

    Drag and Drop

    chinna4all
      i have tree in a panel with image icons,when i drag the leaf node into the another panel i want to the image on that panel. can any one help me.
        • 1. Drag and Drop
          Sreenivas R Adobe Employee
          I had created a sample. It can be found here.

          http://sreenivas.ramaswamy.googlepages.com/DropToPanel.zip

          The sample uses a list control. You should be able to modify it handle the tree case.
          • 2. Re: Drag and Drop
            aprildavid Level 1
            It is an interesting example. ALl those example are using embeded image.Could you help me to take a look what is wrong with my code. I have frustrated for several days.

            I need dynamically load a bunch of image from server, and then display it on left panel. Then I need to drag the image to right panel. But I still want it to show on left side.

            A lof 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);
            }




            }
            }