How to change cursorShape when dragging an item out of MouseArea?

Question

I want to change keep changing cursorShape when dragging an item out of MouseArea.

As you can see in the following code, when I keep mouse in current MouseArea, the cursorShape will be altered into DragCopyCursor. However, further, if I move the mouse to another mouseArea area, the mouse will become ArrowCursor again.

import QtQuick
import QtQuick.Controls

Window {
    width: 300
    height: 300
    visible: true
    color: "#1F1F1F"
    Column {
        anchors.centerIn: parent
        Repeater {
            model: 2
            delegate: Rectangle {
                z: mouseArea.drag.active ? 2 : 0
                color: "#aaaaaa"
                width: 300
                height: 50

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    drag.target: rec
                    Binding {
                        when: mouseArea.drag.active
                        mouseArea.cursorShape: Qt.DragCopyCursor
                    }

                    Rectangle {
                        id: rec
                        color: "white"
                        height: parent.height / 2
                        width: parent.width / 2
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        Text {
                            anchors.centerIn: parent
                            text: "test " + index
                            color: "black"
                        }
                        states: [
                            State {
                                when: mouseArea.drag.active
                                AnchorChanges {
                                    target: rec
                                    anchors.verticalCenter: undefined
                                    anchors.horizontalCenter: undefined
                                }
                            }
                        ]
                    }
                }
            }
        }
    }
}

Answer 1

If you use DragHandler instead of MouseArea you can keep your cursorShape for the entire duration of the drag. N.B. for DragHandler to work, I had to replace the anchoring with explicit calculations for x and y:

    Column {
        anchors.centerIn: parent
        Repeater {
            model: 2
            delegate: Rectangle {
                id: frame
                z: dragHandler.active ? 2 : 0
                color: "#aaaaaa"
                border.color: "pink"
                width: 300
                height: 50
                Rectangle {
                    id: rec
                    color: "white"
                    height: parent.height / 2
                    width: parent.width / 2
                    x: (frame.width - width) / 2
                    y: (frame.height - height) / 2
                    Text {
                        anchors.centerIn: parent
                        text: "test " + index
                        color: "black"
                    }
                    DragHandler {
                        id: dragHandler
                        target: rec
                        cursorShape: Qt.DragCopyCursor
                        onActiveChanged: {
                            if (!active) {
                                rec.x = (frame.width - rec.width) / 2;
                                rec.y = (frame.height - rec.height) / 2;
                            }
                        }
                    }
                }
            }
        }
    }