Bug? mx:HTML sets DragManager.isDragging to true

Report · Feb 24, 2011

I have encountered an issue when using the mx:HTML Air component alongside Flex panels that have images that I want to allow for drag and drop. These panels and images are not rendered inside of the mx:HTML component. I have written a small sample program that demonstrates my issue and am hoping someone can help me in determining a way around this issue (other than the 2 silly ones I have come up with).

When I initially run the program I can drag the image that exists outside of the mx:HTML component just fine. However, when I click on a link inside the mx:HTML component the image that exists outside is no longer draggable. When I debug into this and put a breakpoint inside my mouseMove handler, the DragManager.isDragging flag is set to true. This even happens when I have started the app and never hovered over the image or attempted to drag anything. It just seems that any interaction with the mx:HTML component sets this isDragging state to true and there is a check inside of the NativeDragManager that exits if isDragging is already set to true so no dragging occurs.

After additional experimentation I found 2 really bad workarounds:

1) After clicking on a link inside the mx:HTML, during the HTML load, I can repeatedly click on something outside of the mx:HTML component (stealing focus away from the mx:HTML component, maybe a key??) and the Image object on the other panel stays draggable.

2) If for some reason the Image object on the other panel is no longer draggable I can find something within the mx:HTML component (an image, for example), drag it a little bit and let go of it and this seems to clear the drag state and my Image in the other panel becomes draggable again.

Am I just overlooking something here? It looks to me like a bug in the Air/Flex/Flash framework. I have posted a bug report to Adobe but have heard nothing back yet. I have tried this on both Mac and Windows 7 and the same issue occurs. I am using Flex 4 and have replicated this on AIR 1.5.3, 2.0 and 2.5.1.

Thanks in advance,

Kevin

Here's the code:

<?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"
                            width="1024"
                            height="768">
     <fx:Script>
          <![CDATA[
               import flash.desktop.NativeDragOptions;
               import mx.core.DragSource;
               import mx.events.DragEvent;
               import mx.events.InterDragManagerEvent;
               import mx.events.InterManagerRequest;
               import mx.managers.DragManager;
               import mx.managers.ISystemManager;
               import mx.managers.SystemManagerGlobals;
               
               protected function image1_mouseMoveHandler(event:MouseEvent):void
               {
                    var dragInitiator:Image = event.currentTarget as Image;
                    var ds:DragSource = new DragSource();
                    ds.addData(dragInitiator, "img");               
                    DragManager.doDrag(dragInitiator, ds, event, img);          
               }
          ]]>
     </fx:Script>
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     
     <mx:HDividedBox width="100%" height="100%">
          <mx:HTML
               id="myHtml"
               location="http://www.adobe.com/"
               width="70%"
               height="100%" />
          <s:VGroup width="30%" id="myPanel">
               <s:TextInput id="textInput" />
               <s:Label
                    width="100%"
                    text="On startup you can drag the image below.  Click on a hyperlink within the HTML widget and you can no longer drag the image anymore." />               
               <mx:Image 
                    id="img"
                    source="http://www.adobe.com/homepage/include/style/default/SiteHeader/logo.png" 
                    mouseMove="image1_mouseMoveHandler(event)"/>
          </s:VGroup>
     </mx:HDividedBox>
</s:WindowedApplication>

Report · Feb 24, 2011

Hi Kevin,

Thanks for the great example and description. I've confirmed this on both Mac and Win and have opened a new internal bug (#2816510). I don't have a better workaround for you yet but I'll ask around and see if I can come up with something. Please feel free to contact me on this thread or email me at ccampbel@adobe.com for updates.

Thanks,

Chris

Report · Mar 02, 2011

Hi Kevin,

I might just have a better work-around for you. This workaround consists in using native drag events instead of "classic" drag events (see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/desktop/NativeDragManager.html and related classes). You can see below the modified sample that doesn't have this bug anymore.

Hope this proves useful,

Mihai

<?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"
                            width="1024"
                            height="768">
     <fx:Script>
          <![CDATA[
               import flash.desktop.NativeDragOptions;
               
               import mx.core.DragSource;
               import mx.events.DragEvent;
               import mx.events.InterDragManagerEvent;
               import mx.events.InterManagerRequest;
               import mx.managers.DragManager;
               import mx.managers.ISystemManager;
               import mx.managers.SystemManagerGlobals;
               
               protected function image1_mouseMoveHandler(event:MouseEvent):void
               {
                    var dragInitiator:Image = event.currentTarget as Image;
                    //var ds:DragSource = new DragSource();
                    //ds.addData(dragInitiator, "image/png");               
                    //DragManager.doDrag(dragInitiator, ds, event, img);
                    
                    // Create new clipboard object
                    var cb:Clipboard = new Clipboard();
                    // Add the image URL to the clipboard (you could also add the actual bitmap data, etc.)
                    cb.setData(ClipboardFormats.URL_FORMAT, img.source, true);
                    // Extract the actual bitmap from the image component
                    var bmp:Bitmap = img.content as Bitmap;
                    // Start dragging
                    NativeDragManager.doDrag(dragInitiator, cb, bmp.bitmapData);
               }
          ]]>
     </fx:Script>
     
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     
     <mx:HDividedBox width="100%" height="100%">
          <mx:HTML
               id="myHtml"
               location="http://www.adobe.com/"
               width="70%"
               height="100%" />
          
          <s:VGroup width="30%" id="myPanel">
               <s:TextInput id="textInput" />
               <s:Label
                    width="100%"
                    text="On startup you can drag the image below.  Click on a hyperlink within the HTML widget and you can no longer drag the image anymore." />               
               
               <mx:Image 
                    id="img"
                    source="http://www.adobe.com/homepage/include/style/default/SiteHeader/logo.png" 
                    mouseMove="image1_mouseMoveHandler(event)"/>
          </s:VGroup>
     </mx:HDividedBox>
</s:WindowedApplication>

Report · Mar 02, 2011

Mihai and Chris,

Thanks so much for your assistance on this one. That workaround does indeed work for our app!

Kevin