【原创】QML DropArea 代码示例附 gif 演示

官方文档：https://doc.qt.io/qt-5/qml-qtquick-droparea.html
DropArea 用于指定区域中的拖放处理。
但是它是不可见的。

Drag 是一个附加属性，它可用于在将 Item 拖过时通知 DropArea

代码

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    /* DropArea 设定起作用的区域 */
    DropArea {
        id: dropZone
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        width: 300

        onEntered: { rect02.color = "lightgreen" }

        onExited: { rect02.color = "lightblue" }

        onDropped: { rect02.color = "green" }

        /* 由于 DropArea 是不可见的，
        我们需要有一个带颜色的控件来使得作用区域更加明显  */
        Rectangle {
            id: rect02
            anchors.fill: parent
            color: "lightblue"
            x: root.width - width
            y: 0
        }

    }

    /* 这是允许用户拖动的控件 */
    Rectangle {
        x: 100; y: root.height/2
        width: 50
        height: 50
        radius: 50
        color: "red"
        border.color: "black"
        border.width: 2

        //https://doc.qt.io/qt-5/qml-qtquick-drag.html#active-attached-prop
        Drag.active: dragArea.drag.active

        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.target: parent
            onReleased: { parent.Drag.drop() }
        }
    }

}

//https://www.zhihu.com/people/frostV 更详细的笔记会写在这里