Detecting MouseArea onEntered() when holding the other MouseArea

cuongkjm

i have 2 independent rectangles. press and hold rectangle_1 and keep holding it and move the mouse to rectangle_2. mousearea_2 does not emit signal Entered() until i release the mouse
Here is my code:

Window {
    id: window_
    visible: true
    width: 300
    height: 300

    Rectangle
    {
        id: rectangle_1
        width: 50
        height: 50
        color: "red"
        MouseArea
        {
            id: mousearea_1
            anchors.fill: parent
            onPressAndHold: console.log("hold rectangle_1")
            onReleased: console.log("release rectangle_1")
        }
    }

    Rectangle
    {
        id: rectangle_2
        width: 50
        height: 50
        x: 100
        y: 100
        color: "green"
        MouseArea
        {
            id: mousearea_2
            anchors.fill: parent
            hoverEnabled: true
            onEntered: console.log("enter rectangle_2")
        }
    }
}

I want mousearea_2 emit Entered() signal when i keep holding the mouse. How can i do that??
Thanks!

P/S: another example is the 'Facebook like button'. Keep holding like button and move to the other icons. it highlights the selected icon.

ODБOï

@cuongkjm hi
Are you trying to implement Drag and Drop functionality ?
If so see
https://doc.qt.io/qt-5/qtquick-draganddrop-example.html

Window {
    id: window_
    visible: true
    width: 300
    height: 300

        DropArea {
            anchors.centerIn: parent
            width: 50
            height: 50

            Rectangle {
                anchors.fill: parent
                color: parent.containsDrag ? "green" : "transparent"
                border.width: 2
            }
        }

        Rectangle {
            width: 20
            height: 20
            color: "red"
            Drag.active: dragItem.drag.active
            MouseArea {
                id: dragItem
                anchors.fill: parent
                drag.target: parent
            }
        }
}