2 Replies Latest reply on Dec 8, 2010 5:18 AM by Starlover_jacob

    Draggble Image??

    jefflemon Level 1
      Hi,

      I need to create an image that is draggable (but not like drag and drop), I want it so that the image is postioned on the canvas and a user can drag it to a new position on the canvas
        • 1. Re: Draggble Image??
          aligned2009 Level 1
          Have fun dragging around Evangeline Lilly.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
          creationComplete="init()">
          <mx:Script>
          <![CDATA[
          import mx.events.DragEvent;
          import mx.core.DragSource;
          import mx.managers.DragManager;

          [Bindable]
          public var imageSrc:String;

          private function init():void{
          imageSrc=" http://www.celebutaint.com/images/evangeline-lilly-esquire04a.jpg";
          }
          private function dragIt(event:MouseEvent):void {
          var dragInitiator:Image=Image(event.currentTarget);
          var ds:DragSource = new DragSource();
          var imageProxy:Image = new Image();
          DragManager.doDrag(dragInitiator, ds, event, imageProxy);
          DragManager.acceptDragDrop(can);
          }

          private function doDragDrop(event:DragEvent):void {
          im.move(event.localX, event.localY);
          }

          ]]>
          </mx:Script>
          <mx:Canvas id="can" width="100%" height="100%" backgroundColor="white"
          dragDrop="doDragDrop(event);">
          <mx:Image id="im" mouseMove="dragIt(event);" source="{imageSrc}"/>
          </mx:Canvas>
          </mx:Application>


          • 2. Re: Draggble Image??
            Starlover_jacob Level 1

            Hello,

             

            Above example did not work in air.

            You also need to create a dragEnter function.

             

            It also didn't show the image while dragging.

             

            Below code works in air:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
            <mx:Script>
            <![CDATA[
                 import mx.core.BitmapAsset;
                 import mx.core.UIComponent;
                 import mx.events.DragEvent;
                 import mx.core.DragSource;
                 import mx.managers.DragManager;
            
            [Bindable]
            public var imageSrc:String;
            
            private function init():void
            {
            imageSrc="http://www.celebutaint.com/images/evangeline-lilly-esquire04a.jpg";
            }
            private function doDragEnter(event:DragEvent):void
            {            
                DragManager.acceptDragDrop(UIComponent(event.target));
            }
            private function dragIt(event:MouseEvent):void 
            {
                 var dragInitiator:Image=Image(event.currentTarget);
                 var ds:DragSource = new DragSource();
                 
                 var bitmapData:BitmapData = new BitmapData(dragInitiator.width,dragInitiator.height);
                 bitmapData.draw(dragInitiator);
                 var dragProxy:BitmapAsset = new BitmapAsset(bitmapData);
                 
                 DragManager.doDrag(dragInitiator, ds, event, dragProxy);
                 DragManager.acceptDragDrop(can);
            }
            
            private function doDragDrop(event:DragEvent):void 
            {
                 im.move(event.localX, event.localY);
            }
            
            ]]>
            </mx:Script>
            <mx:Canvas id="can" width="100%" height="100%" backgroundColor="white"
            dragDrop="doDragDrop(event);" dragEnter="doDragEnter(event)">
            <mx:Image id="im" mouseMove="dragIt(event);" source="{imageSrc}" width="77" height="71"/>
            </mx:Canvas>
                 
            </mx:WindowedApplication>
            

             

            Greets, J.