Qt Quick Exemples - Glisser-déposer
Voici une série d'exemples de glisser-déposer en QML.
« Glisser-déposer » est une collection de petits exemples QML liés à la fonctionnalité de glisser-déposer. Pour plus d'informations, consultez la page Glisser-déposer.
Exécution de l'exemple
Vous pouvez exécuter l'exemple à partir de :
- Qt Creator
Ouvrez le mode « Welcome » et sélectionnez l'exemple dans « Examples ». Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.
- Qt Extension for Visual Studio Code
Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.
Tiles
Tiles ajoute la fonctionnalité de glisser-déposer à de simples rectangles, que vous pouvez faire glisser dans une grille spécifique.
Il dispose d’un composant DragTile qui utilise une interface MouseArea pour déplacer un élément lorsqu’il est glissé :
Item {
id: root
required property string colorKey
required property int modelData
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
horizontalCenter: parent.horizontalCenter
}
color: root.colorKey
Drag.keys: [ root.colorKey ]
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: 32
Drag.hotSpot.y: 32
states: State {
when: mouseArea.drag.active
AnchorChanges {
target: tile
anchors {
verticalCenter: undefined
horizontalCenter: undefined
}
}
}
}
}
}Et un composant DropTile sur lequel les tuiles glissées peuvent être déposées :
DropArea {
id: dragTarget
property string colorKey
width: 64
height: 64
keys: [ colorKey ]
Rectangle {
id: dropRectangle
anchors.fill: parent
color: dragTarget.containsDrag ? "grey" : dragTarget.colorKey
}
}La propriété `keys` de l'DropArea n'autorisera le dépôt d'un élément que si celui-ci possède une clé correspondante dans sa propriété `Drag.keys`.
Exemple GridView
L’exemple «GridView » ajoute la fonctionnalité de glisser-déposer à un « GridView », vous permettant de réorganiser visuellement les délégués sans modifier l’ ListModel sous-jacente. Il utilise un « DelegateModel » pour déplacer un élément délégué vers la position d’un autre élément sur lequel il est glissé.
model: DelegateModel {
delegate: DropArea {
id: delegateRoot
required property color color
width: 80
height: 80
onEntered: function(drag) {
visualModel.items.move((drag.source as Icon).visualIndex, icon.visualIndex)
}
property int visualIndex: DelegateModel.itemsIndex
Icon {
id: icon
dragParent: root
visualIndex: delegateRoot.visualIndex
color: delegateRoot.color
}
}© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
