2 Replies Latest reply on Apr 25, 2010 6:40 AM by lrtneu

    [Flex 4] Can't Set Drag indicator in Air Application

    jmandawg

      I'm trying to make a simple Air app that lets the user drag an Icon from one panel into another.  I want to set the drag indicator to look like the icon being dragged.  But no icon is being displayed.  Here is my code.  I'm using flash builder 4, it shouldn't be this hard.

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          viewSourceURL="srcview/index.html">
         
          <fx:Script>
              <![CDATA[
                  import mx.core.DragSource;
                  import mx.core.IUIComponent;
                  import mx.events.DragEvent;
                  import mx.managers.DragManager;
                 
                  [Embed("assets/network.jpg")]
                  private var network_icon:Class;
                 
                  //user clicks the src, so allow drag
                  private function mouseDownHandle(e:MouseEvent):void {
                      var img:Image = e.currentTarget as  Image;
                      var dragImg:Image = new Image();
                      dragImg.source = img.source;
                      dragImg.width = 111;
                      dragImg.height = 111;
                     
                      var src:Image = Image(e.currentTarget);
                      var ds:DragSource = new DragSource();
                      ds.addData(src, "img");
                      DragManager.doDrag(e.currentTarget as IUIComponent, ds, e, dragImg);
                  }
                 
                  //user moves the drag proxy onto the drop target, so allow drop
                  private function dragEnterHandler(e:DragEvent):void {
                      DragManager.acceptDragDrop(e.currentTarget as IUIComponent);
                  }
                 
                  //user drops src onto target, so re-parent the src to the target
                  private function dragDropHandler(e:DragEvent):void {
                      e.currentTarget.addElement(e.dragInitiator);
                  }
              ]]>
          </fx:Script>
         
          <!-- SRC -->
          <s:Panel title="src" width="100" minHeight="133" x="10" y="10">
              <s:layout>
                  <s:VerticalLayout gap="10" horizontalAlign="center"
                                    paddingTop="10" paddingBottom="10" />
              </s:layout>
             
              <mx:Image source="{network_icon}" mouseMove="{mouseDownHandle(event);}" />
             
          </s:Panel>
         
          <!-- TARGET -->
          <s:Panel title="target" width="100" minHeight="133" x="120" y="10"
                   dragEnter="dragEnterHandler(event);"
                   dragDrop="dragDropHandler(event);">
             
              <s:layout>
                  <s:VerticalLayout gap="10" horizontalAlign="center"
                                    paddingTop="10" paddingBottom="10" />
              </s:layout>
          </s:Panel>
      </s:WindowedApplication>