Qt Quick Examples - Drag and Drop▲
Drag and Drop is a collection of small QML examples relating to the drag and drop functionality. For more information, visit the Drag and Drop page.
Running the Example▲
To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.
Tiles▲
Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.
It has a DragTile component which uses a MouseArea to move an item when dragged:
Sélectionnez
Item {
id: root
property string colorKey
width: 64; height: 64
MouseArea {
id: mouseArea
width: 64; height: 64
anchors.centerIn: parent
drag.target: tile
onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root
Rectangle {
id: tile
width: 64; height: 64
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: colorKey
Drag.keys: [ colorKey ]
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: 32
Drag.hotSpot.y: 32
states: State {
when: mouseArea.drag.active
ParentChange { target: tile; parent: root }
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}
}
}
}And a DropTile component on which the dragged tiles can be dropped:
Sélectionnez
DropArea {
id: dragTarget
property string colorKey
property alias dropProxy: dragTarget
width: 64; height: 64
keys: [ colorKey ]
Rectangle {
id: dropRectangle
anchors.fill: parent
color: colorKey
states: [
State {
when: dragTarget.containsDrag
PropertyChanges {
target: dropRectangle
color: "grey"
}
}
]
}
}The keys property of the DropArea will only allow an item to be dropped on it if it has a matching key in its Drag.keys property.