Exemple d'icônes déplaçables

Dans de nombreuses situations où le glisser-déposer est utilisé, l’utilisateur commence à faire glisser un élément depuis un widget particulier et le dépose sur un autre widget. Dans cet exemple, nous créons une sous-classe de ` QLabel ` pour créer des étiquettes que nous utilisons comme sources de glissement, et nous les plaçons à l’intérieur d’un ` QWidget` qui sert à la fois de conteneur et de zone de dépôt.

De plus, lorsqu’une opération de glisser-déposer a lieu, nous souhaitons envoyer plus qu’une simple image. Nous souhaitons également envoyer des informations sur l’endroit où l’utilisateur a cliqué sur l’image afin qu’il puisse la placer précisément sur la cible de dépôt. Ce niveau de détail implique que nous devons créer un type MIME personnalisé pour nos données.

Définition de la classe DragWidget

Les widgets d’icônes que nous utilisons pour afficher les icônes sont des sous-classes de ` QLabel` :

class DragWidget : public QFrame
{
public:
    explicit DragWidget(QWidget *parent = nullptr);

protected:
    void dragEnterEvent(QDragEnterEvent *event) override;
    void dragMoveEvent(QDragMoveEvent *event) override;
    void dropEvent(QDropEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;
};

Comme la classe ` QLabel ` fournit la plupart des fonctionnalités dont nous avons besoin pour l’icône, il nous suffit de réimplémenter la méthode ` QWidget::mousePressEvent()` pour offrir des fonctionnalités de glisser-déposer.

Implémentation de la classe DragWidget

Le constructeur de ` DragWidget ` définit un attribut sur le widget qui garantit qu’il sera supprimé lorsqu’il sera fermé :

DragWidget::DragWidget(QWidget *parent)
    : QFrame(parent)
{
    setMinimumSize(200, 200);
    setFrameStyle(QFrame::Sunken | QFrame::StyledPanel);
    setAcceptDrops(true);

    QLabel *boatIcon = new QLabel(this);
    boatIcon->setPixmap(QPixmap(":/images/boat.png"));
    boatIcon->move(10, 10);
    boatIcon->show();
    boatIcon->setAttribute(Qt::WA_DeleteOnClose);

    QLabel *carIcon = new QLabel(this);
    carIcon->setPixmap(QPixmap(":/images/car.png"));
    carIcon->move(100, 10);
    carIcon->show();
    carIcon->setAttribute(Qt::WA_DeleteOnClose);

    QLabel *houseIcon = new QLabel(this);
    houseIcon->setPixmap(QPixmap(":/images/house.png"));
    houseIcon->move(10, 80);
    houseIcon->show();
    houseIcon->setAttribute(Qt::WA_DeleteOnClose);
}

Pour permettre le glisser-déposer à partir de l’icône, nous devons réagir à un événement de clic de souris. Pour ce faire, nous réimplémentons la méthode ` QWidget::mousePressEvent()` et configurons un objet ` QDrag `.

void DragWidget::mousePressEvent(QMouseEvent *event)
{
    QLabel *child = static_cast<QLabel*>(childAt(event->position().toPoint()));
    if (!child)
        return;

    QPixmap pixmap = child->pixmap();

    QByteArray itemData;
    QDataStream dataStream(&itemData, QIODevice::WriteOnly);
    dataStream << pixmap << QPoint(event->position().toPoint() - child->pos());

Comme nous allons envoyer des données pixmap pour l’icône ainsi que des informations sur le clic de l’utilisateur dans le widget icône, nous construisons un ` QByteArray ` et regroupons ces détails à l’aide d’un ` QDataStream`.

Pour des raisons d’interopérabilité, les opérations de glisser-déposer décrivent les données qu’elles contiennent à l’aide de types MIME. Dans Qt, nous décrivons ces données à l’aide d’un objet ` QMimeData ` :

    QMimeData *mimeData = new QMimeData;
    mimeData->setData("application/x-dnditemdata", itemData);

Nous choisissons un type MIME non officiel à cette fin et fournissons l'QByteArray à l'objet de données MIME.

L’opération de glisser-déposer elle-même est gérée par un objet ` QDrag ` :

    QDrag *drag = new QDrag(this);
    drag->setMimeData(mimeData);
    drag->setPixmap(pixmap);
    drag->setHotSpot(event->position().toPoint() - child->pos());

Ici, nous transmettons les données à l’objet de glisser-déposer, définissons une image (pixmap) qui s’affichera à côté du curseur pendant l’opération, et définissons la position d’une zone sensible (hot spot) qui place cette image sous le curseur.

Exemple de projet sur code.qt.io