QML - MouseArea/MouseEvent issue

Question

The following piece of code generates a white rectangle containing a red rectangle and a grey rectangle. Every rectangle has an associated MouseArea. The grey rectangle becomes blue when the mouse is clicked inside it. The red rectangle prints a console message when the mouse cursor enters inside it and another message when the released signal is emitted.

I would like to:

1. press and hold the mouse button inside the grey rectangle (becoming blue)
2. move the cursor outside the grey/blue rectangle and then inside the red rectangle, without releasing the button and capturing the entered signal of the red rectangle
3. release the button having the cursor inside the red rectangle and capturing the released signal of the red rectangle.

Is it possible? With the current code, the entered signal of the red rectangle is only emitted if the mopuse button is not pressed while entering and the released signal is only emitted if the button was pressed inside that rectangle. The problem, evidently, is that the grey/blue rectangle takes the control of mouse events if the button is pressed there.

This is a similar, but simplified, scenario to the one I am having in an application I am developing.

import QtQuick 2.0

Rectangle{
    color: "white"
    height: 210
    width: 500

    MouseArea{
      id: mainMa
      anchors.fill: parent
      hoverEnabled: true
      onReleased:{console.log("white-released")}
   }

   Column{
       spacing: 10
       Rectangle{
           color: "red"
           height: 100
           width: 500
          MouseArea{
             anchors.fill: parent
             hoverEnabled: true
             propagateComposedEvents: true
             onEntered:{console.log("red-enter")}
             onReleased:{console.log("red-released")}
          }
       }

       Rectangle{
           color: "#666666"
           height: 100
           width: 500
           MouseArea{
               id: ma
               anchors.fill: parent
               hoverEnabled: true
               onPressed: {parent.color = "blue"; console.log("grey pressed")}
               onReleased: {parent.color = "#666666"; console.log("grey released")}
           }
       }
   }

}

Answer 1

I think you want drag&drop operations. For that, add DropArea in you red rectangle and active drag in grey rectangle

Something like that (minimal code) :

Rectangle {
    Column {
        Rectangle {
            id: redRect
            DropArea {
                anchors.fill: parent
                onEntered: { console.log("red-enter") }
                onDropped: { console.log("red-released") }
            }
        }
        Rectangle {
            id: greyRect
            Drag.active: mousearea.drag.active
            Drag.hotSpot.x: mousearea.mouseX
            Drag.hotSpot.y: mousearea.mouseY
            MouseArea {
                id: mousearea
                anchors.fill: parent
                onReleased: parent.Drag.drop()
                drag.target: parent
            }
        }
    }
}

If you don't want to move grey rectangle, you can add invisible draggable item :

    MouseArea {
    id: mousearea
    anchors.fill: parent
    onReleased: dargItem.Drag.drop()
    drag.target: dargItem
    Item {
        id: dargItem
        x: mousearea.mouseX
        y: mousearea.mouseY
        width: 1; height: 1
        Drag.active: mousearea.drag.active
        Drag.hotSpot.x: 1
        Drag.hotSpot.y: 1
    }                    
}