qml Drag 拖拽

Drag 拖拽

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    width: 640
    height: 480
    visible: true// 控制窗口是否可见，默认为 true
    title: qsTr("Hello World")


    // 主矩形，宽400，高400，颜色为浅灰色
    Rectangle {
        id: mainRect
        width: 400
        height: 400
        color: "lightgray"

        MouseArea{
            anchors.fill: parent
            // 启用拖动功能，目标为父元素draggableRect
            drag.target: parent
            drag.axis: Drag.XAxis | Drag.YAxis // 允许水平拖动和垂直拖动
            // 当鼠标按下时触发
            onPressed: {
                // 将方块置于最顶层，使其在拖动时不会被其他元素遮挡
                draggableRect.z = 1
            }

            // 当鼠标释放时触发
            onReleased: {
                // 释放后恢复z值，使其回到默认层级
                draggableRect.z = 0
            }
        }
        // 可拖动的方块，宽100，高100，颜色为蓝色，初始位置在(150, 150)
        Rectangle {
            id: draggableRect
            width: 100
            height: 100
            color: "blue"


            // MouseArea用于捕获鼠标事件，填充整个方块
            MouseArea {
                id: dragArea
                anchors.fill: parent
                // 启用拖动功能，目标为父元素draggableRect
                drag.target: parent
                drag.axis: Drag.XAxis | Drag.YAxis // 允许水平拖动和垂直拖动
                drag.minimumX: 0 // 限制最小X坐标
                drag.maximumX: mainRect.width-draggableRect.width // 限制最大X坐标
                drag.minimumY: 0 // 限制最小Y坐标
                drag.maximumY: mainRect.height-draggableRect.height // 限制最大Y坐标
                // 当鼠标按下时触发
                onPressed: {
                    // 将方块置于最顶层，使其在拖动时不会被其他元素遮挡
                    draggableRect.z = 1
                }

                // 当鼠标释放时触发
                onReleased: {
                    // 释放后恢复z值，使其回到默认层级
                    draggableRect.z = 0
                }
            }
        }
    }
    
}