DragManager prevents mouse events of children *Updated*

I just ran into another strange behavior of flex. Lets say you have a VBox, with an image inside. When the user clicks the image, it should do some stuff, but when the user clicks (mousedown actually) the VBox it should start dragging. You would expect that when you click the image, both events are fired. This is true when you don’t invoke the dragmanager. If you call the dragmanager, it cancels out all further mouseEvents, thus preventing the code of the image clickhandler to execute.

I hear you thinking “why would you want something like this?”. Well, I’m rebuilding the tree component and I need to have a click event on the icon to open a node. Also I need a mousedown event on the node (icon and label) to enable dragging in the tree. When you call the dragmanager, the click event of the icon doesn’t come through (although sometimes it does…). I created a small test case, which you can view here (source available). Click on the small icon, it will start dragging it and write to the textarea that the mousedown event is received. Now disable the dragmanager and click again, you’ll see that now 2 events are captured.

The problem with this issue is that the mousedown event is fired before the click event, so you’ll never know if the user clicked the icon. Right now, I don’t really have a solution for this issue, maybe I’ll end up rewriting the dragmanager so that it won’t cancel out all events.

Update 03/27/08

I found a work around for this problem. You call the dragmanager at mouseMove, not at mouseDown. If you click now, the click event is fired and the dragmanager is not invoked. But make sure you set a boolean at mouseDown that dragging is allowed and set it to false at mouseUp. Otherwise, flex will allways drag if you move the mouse over the component.

 

/////////////////////////////////////////

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    mouseUp="_dragging = false"
    mouseOver="_dragging = false;"
    viewSourceURL="srcview/index.html">
    <mx:VBox
        id="box"
        backgroundColor="#ff6600"
        mouseDown="_dragging = true"
        mouseMove="_boxDown(event)">
        <mx:Image
            id="img"
            click="txt.htmlText += &apos;image.CLICK&lt;br /&gt;&apos;"
            source="app.png" />       
    </mx:VBox>
   
    <mx:CheckBox
        selected="{this._dragEnabled}"
        id="chb"
        label="Enable dragmanager"
        click="this._dragEnabled = chb.selected"/>
       
    <mx:TextArea
        height="100%"
        id="txt" />
       
        <mx:Script>
            <![CDATA[
                import mx.managers.DragManager;
                import mx.core.UIComponent;
                import mx.core.DragSource;
               
                [Bindable]
                private var _dragEnabled:Boolean = true;
               
                [Bindable]
                private var _dragging:Boolean = false;
               
                private function _boxDown(event:MouseEvent):void {
                    if(!_dragging) return;
                   
                    txt.htmlText += "vbox.MOUSEMOVE<br />"
                   
                    if(!this._dragEnabled) return;
                   
                    var ds:DragSource = new DragSource();           
                    DragManager.doDrag(event.currentTarget as UIComponent, ds, event);
                }
            ]]>
        </mx:Script>
</mx:Application>
原文:http://blog.idsklijnsma.nl/dragmanager-prevents-mouse-events-of-children/