Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Detecting MouseArea onEntered() when holding the other MouseArea



  • 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.



  • @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
                }
            }
    }
    

Log in to reply