拖放事件(DragEvent)

 Qt Quick
时间:

要想实现简单的拖动,可以使用MouseArea中的drag分组属性。

import QtQuick 2.2

Rectangle {
    id: container
    width: 600; height: 200
    Rectangle {
        id: rect
        width: 50; height: 50
        color: "red"
        opacity: (600.0 - rect.x) / 600

        MouseArea {
            anchors.fill: parent
            drag.target: rect
            drag.axis: Drag.XAxis
            drag.minimumX: 0
            drag.maximumX: container.width - rect.width
        }
    }
}

要实现更复杂的拖放操作,比如想获取拖动项目的相关的信息,那么就要使用DragEvent拖放事件了。在DragEvent中可以通过x和y属性获取拖动的位置;使用keys属性获取可以识别数据类型或源的键列表;通过hasColor,hasHtml,hasText和hasUrls属性获得;formats属性可以获取拖动数据中包含的MIME类型格式的列表;可以使用drag.source来获取拖动事件的源。

为了更好地理解拖放操作,看下例子:

import QtQuick 2.2

Rectangle {
    id: rect
    width: 20; height: 20
    Drag.active: dragArea.drag.active
    Drag.hotSpot.x: 10
    Drag.hotSpot.y: 10
    Drag.source: rect
    MouseArea {
        id: dragArea
        anchors.fill: parent
        drag.target: parent
    }
}
import QtQuick 2.2

Item {
    width: 400; height: 150
    DropArea {
        x: 175; y: 75
        width: 50; height: 50
        Rectangle {
            id: area; anchors.fill: parent
            border.color: "black"
        }

        onEntered: {
            area.color = drag.source.color
        }
    }

    Qmldemo50{ color: "blue"; x: 110 }
    Qmldemo50{ color: "red"; x: 140 }
    Qmldemo50{ color: "yellow"; x: 170 }
    Qmldemo50{ color: "black"; x: 200 }
    Qmldemo50{ color: "steelblue"; x: 230 }
    Qmldemo50{ color: "green"; x: 260 }

}


0 评论