Rectangle {
id: rectangle
x: 40 + Math.random() * (parent.width - 2 * 40)
y: 40 + Math.random() * (parent.height - 2 * 40)
width: 40; height: 40
color: (drop.containsDrag) ? "darkgreen" : "lightgrey"
DropArea { id: drop anchors.fill: parent } } Rectangle { id: drag x: 20; y: 20
width: 20; height: 20 color: "black" Drag.active: true Drag.hotSpot: { x: 10; y: 10 }
MouseArea { id: dragArea anchors.fill: parent drag.target: parent } } }
La première chose à faire pour activer le glisser-déposer d'un élément est de le
marquer comme glissable. Pour ce faire, il faut que le composant déplaçable
réagisse aux événements de souris (d'où le MouseArea), mais aussi que le
déplacement concerne un élément graphique, indiqué par la propriété drag.target.
Toute la représentation graphique de cet élément sera déplacée avec la souris.
Note > De manière générale, ce composant MouseArea gère tous les aspects du
déplacement : les propriétés drag. indiquent s'il faut limiter la zone accessible ou
s'il faut gérer le comportement par rapport à d'autres composants pour le
déplacement, par exemple.
Ensuite, pour que le glissement soit effectif et que d'autres parties du code puissent
gérer le dépôt, il faut activer l'émission d'événements avec la propriété attachée
Drag.active directement au niveau de l'élément déplaçable.
Même si les deux étapes précédentes sont suffisantes, pour améliorer l'expérience
utilisateur, il est intéressant de modifier le point où Qt Quick décide qu'il y a une
collision : dès que le point indiqué par la propriété attachée Drag.hotSpot touche
une zone DropArea, il envoie des événements de glisser-déposer. Par défaut, il
s'agit du coin en haut à gauche, ce qui est un comportement contre-intuitif pour
l'utilisateur (il faudrait que le coin en haut à gauche de drag touche la zone de
rectangle pour qu'il s'allume).
Côté récepteur, l'action principale pour recevoir des éléments est de définir un
élément DropArea, de la même manière qu'un élément MouseArea est utilisé pour la
souris. Ce composant définit bon nombre de propriétés et de gestionnaires de signal
utiles pour la configuration et l'utilisation à l'exécution. Parmi elles, containsDrag
indique s'il y a (ou non) un événement de dépôt.
411
id: rectangle
x: 40 + Math.random() * (parent.width - 2 * 40)
y: 40 + Math.random() * (parent.height - 2 * 40)
width: 40; height: 40
color: (drop.containsDrag) ? "darkgreen" : "lightgrey"
DropArea { id: drop anchors.fill: parent } } Rectangle { id: drag x: 20; y: 20
width: 20; height: 20 color: "black" Drag.active: true Drag.hotSpot: { x: 10; y: 10 }
MouseArea { id: dragArea anchors.fill: parent drag.target: parent } } }
La première chose à faire pour activer le glisser-déposer d'un élément est de le
marquer comme glissable. Pour ce faire, il faut que le composant déplaçable
réagisse aux événements de souris (d'où le MouseArea), mais aussi que le
déplacement concerne un élément graphique, indiqué par la propriété drag.target.
Toute la représentation graphique de cet élément sera déplacée avec la souris.
Note > De manière générale, ce composant MouseArea gère tous les aspects du
déplacement : les propriétés drag. indiquent s'il faut limiter la zone accessible ou
s'il faut gérer le comportement par rapport à d'autres composants pour le
déplacement, par exemple.
Ensuite, pour que le glissement soit effectif et que d'autres parties du code puissent
gérer le dépôt, il faut activer l'émission d'événements avec la propriété attachée
Drag.active directement au niveau de l'élément déplaçable.
Même si les deux étapes précédentes sont suffisantes, pour améliorer l'expérience
utilisateur, il est intéressant de modifier le point où Qt Quick décide qu'il y a une
collision : dès que le point indiqué par la propriété attachée Drag.hotSpot touche
une zone DropArea, il envoie des événements de glisser-déposer. Par défaut, il
s'agit du coin en haut à gauche, ce qui est un comportement contre-intuitif pour
l'utilisateur (il faudrait que le coin en haut à gauche de drag touche la zone de
rectangle pour qu'il s'allume).
Côté récepteur, l'action principale pour recevoir des éléments est de définir un
élément DropArea, de la même manière qu'un élément MouseArea est utilisé pour la
souris. Ce composant définit bon nombre de propriétés et de gestionnaires de signal
utiles pour la configuration et l'utilisation à l'exécution. Parmi elles, containsDrag
indique s'il y a (ou non) un événement de dépôt.
411