Qt,QML的DropArea的通常使用

 

DraggableItem.qml

// DraggableItem.qml
import QtQuick 2.15
import QtGraphicalEffects 1.13

Item {
    id: dropItem
    width: 50
    height: 50
    property string videoPath: ""
    property alias imageSource: itemImage.source
    Image {
        id: itemImage
        anchors.centerIn: parent
        width: parent.width
        height: parent.height
        source: ""
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: itemImage.width
                height: itemImage.height
                color: "white"
                radius: itemImage.width * 0.2
            }
        }
    }
    MouseArea{
        id: mouseArea
        enabled: true
        propagateComposedEvents: true
        acceptedButtons: Qt.LeftButton
        anchors.fill: parent
        drag.target: actualMovingElement

        onClicked: {
            actualMovingElement.visible = false;

        }
        onPressed: {
            actualMovingElement.visible = false
            console.log("我按下了Pressed")
        }
        onReleased: {
            actualMovingElement.visible = false
            actualMovingElement.Drag.drop()
            actualMovingElement.x = 0;
            actualMovingElement.y = 0;
            console.log("我释放了Released")
        }
        onPositionChanged: {
            if(mouseArea.pressed)
            {
                // 如果正在被拖动
                if(mouseArea.drag.active)
                {
                    // 实时变动位置以保持正中心
                    var current = mapToItem(rootItem,mouseX,mouseY)
                    actualMovingElement.x = current.x - actualMovingElement.width/2
                    actualMovingElement.y = current.y - actual