Qt Quick Exemples - Glisser-déposer
Il s'agit d'une collection d'exemples QML de glisser-déposer.
Drag and Drop est une collection de petits exemples QML relatifs à la fonctionnalité drag and drop. Pour plus d'informations, consultez la page Drag and Drop.
Exécution de l'exemple
Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.
Carreaux
Tiles ajoute le glisser-déposer à de simples rectangles, que vous pouvez faire glisser dans une grille spécifique.
Il comporte un composant DragTile qui utilise une adresse MouseArea pour déplacer un élément lorsqu'on le fait glisser :
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 du composant DropArea n'autorise le dépôt d'un élément que s'il possède une clé correspondante dans sa propriété Drag.keys.
Exemple de grille de visualisation
L'exempleGridView ajoute la fonction glisser-déposer à une grille GridView, ce qui permet de réorganiser visuellement les délégués sans modifier la grille sous-jacente ListModel. Il utilise une adresse DelegateModel pour déplacer un élément délégué à 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.
