Qt-QML：Droparea可滚动

Question

我正在尝试创建一个可滚动的拖放区，然后保存元素x，y的位置。 我的意思是我们可以在该区域中拖动元素，但是如果我们靠近锚点，则该区域会不断扩大。

由于我有多个可拖动元素，因此我创建了一个qml可拖动元素：

Rectangle {
    property Item dragTarget: parent
    property point beginDrag
    property bool caught: false

    id: draggable
    width: dragTarget.width; height: dragTarget.height
    z: mouseArea.drag.active ||  mouseArea.pressed ? 2 : 1
    color: Qt.rgba(1, 1, 1, 0)

    Drag.active: mouseArea.drag.active

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        drag.target: dragTarget

        onPressed: {
            draggable.beginDrag = Qt.point(dragTarget.x, dragTarget.y);
            console.log(width);
        }

        onReleased: {
            if(!draggable.caught) {
                backAnimX.from = dragTarget.x;
                backAnimX.to = beginDrag.x;
                backAnimY.from = dragTarget.y;
                backAnimY.to = beginDrag.y;
                backAnim.start()
            }
        }
    }
    ParallelAnimation {
        id: backAnim
        SpringAnimation { id: backAnimX; target: dragTarget; property: "x"; duration: 500; spring: 2; damping: 0.2 }
        SpringAnimation { id: backAnimY; target: dragTarget; property: "y"; duration: 500; spring: 2; damping: 0.2 }
    }
}

我在类似它的某些组件中使用它：

Rectangle {
    id: entity
    width: parent.width; height: parent.height

    Components.Draggable {
        id: draggable
        width: parent.width; height: parent.height
        dragTarget: entity
    }
}

最后，当我在main.qml中使用它们时：

Window {
    id: window
    width: 800
    height: 600
    title: "QMerise"
    visible: true

    Rectangle {
        id: canvas
        anchors {
            top: parent.top
            left:  parent.left
            bottom:  parent.bottom
        }
        width: parent.width * 0.5; height: parent.height * 0.9
        color: Qt.rgba(0.75, 0.75, 0.75, 0.4)

        DropArea {
            anchors.fill: parent
            onEntered: {drag.source.caught = true; console.log('ENTER');}
            onExited: {drag.source.caught = false; console.log('EXIT');}
        }

        Element.Entity {
            id: entity
            width: 100; height: 100
            color: "red"
            x: 500; y: 300
        }
    }
}

但是当我们拖动该元素时，它永远不会发出onEntered / onExited信号。 我错过了什么 ？ 顺便说一句，当我在锚点附近拖动时，如何扩大dropArea？ 感谢您的帮助。