topical media & game development

talk show tell print

flex-dragdrop-image-proxy.mx

flex-dragdrop-image-proxy.mx [swf] flex


  <?xml version="1.0"?>
  <!-- dragdrop\DandDImageProxy.mxml -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  viewSourceURL="@mx-flex-dragdrop-image-proxy.html"
  >
  
      <mx:Script>
          <![CDATA[
              //Import classes so you don't have to use full names.
              import mx.managers.DragManager;
              import mx.core.DragSource;
              import mx.events.DragEvent;
              import flash.events.MouseEvent;
  
              // Embed icon image.
              [Embed(source='local/flex/assets/logo.jpg')]
              public var globeImage:Class;
  
              // The mouseMove event handler for the Image control
              // initiates the drag-and-drop operation.
              private function mouseOverHandler(event:MouseEvent):void 
              {                
                  var dragInitiator:Image=Image(event.currentTarget);
                  var ds:DragSource = new DragSource();
                  ds.addData(dragInitiator, "img");               
  
                  // The drag manager uses the Image control 
                  // as the drag proxy and sets the alpha to 1.0 (opaque),
                  // so it appears to be dragged across the Canvas.
                  var imageProxy:Image = new Image();
                  imageProxy.source = globeImage;
                  imageProxy.height=15;
                  imageProxy.width=15;                
                  DragManager.doDrag(dragInitiator, ds, event, 
                      imageProxy, -15, -15, 1.00);
              }
              
              // The dragEnter event handler for the Canvas container
              // enables dropping.
              private function dragEnterHandler(event:DragEvent):void {
                  if (event.dragSource.hasFormat("img"))
                  {
                      DragManager.acceptDragDrop(Canvas(event.currentTarget));
                  }
              }
  
              // The dragDrop event handler for the Canvas container
              // sets the Image control's position by 
              // "dropping" it in its new location.
              private function dragDropHandler(event:DragEvent):void {
                  Image(event.dragInitiator).x = 
                      Canvas(event.currentTarget).mouseX;
                  Image(event.dragInitiator).y = 
                      Canvas(event.currentTarget).mouseY;
              }
          ]]>
      </mx:Script>
      
      <!-- The Canvas is the drag target --> 
      <mx:Canvas id="v1" 
          width="500" height="500"  
          borderStyle="solid" 
          backgroundColor="#DDDDDD"
          dragEnter="dragEnterHandler(event);" 
          dragDrop="dragDropHandler(event);">
          
          <!-- The image is the drag initiator. -->
          <mx:Image id="myimg" 
              source="@Embed(source='local/flex/assets/logo.jpg')" 
              mouseMove="mouseOverHandler(event);"/> 
      </mx:Canvas>
  </mx:Application>
  
  


(C) Æliens 27/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.