Beispiel für verschiebbare Symbole

In vielen Situationen, in denen Drag & Drop zum Einsatz kommt, beginnt der Benutzer das Ziehen von einem bestimmten Widget aus und legt die Daten auf einem anderen Widget ab. In diesem Beispiel erstellen wir eine Unterklasse von „ QLabel “, um Beschriftungen zu erstellen, die wir als Zugquellen verwenden, und platzieren diese in „ QWidgets“, die sowohl als Container als auch als Ablageorte dienen.

Außerdem möchten wir bei einem Drag-and-Drop-Vorgang mehr als nur ein Bild senden. Wir möchten auch Informationen darüber übermitteln, an welcher Stelle der Benutzer auf das Bild geklickt hat, damit er es präzise auf dem Zielort platzieren kann. Dieser Detaillierungsgrad bedeutet, dass wir einen benutzerdefinierten MIME-Typ für unsere Daten erstellen müssen.

Definition der Klasse „DragWidget“

Die Icon-Widgets, die wir zur Anzeige von Symbolen verwenden, sind Unterklassen von ` 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;
};

Da die Klasse „ QLabel “ bereits den Großteil dessen bereitstellt, was wir für das Icon benötigen, müssen wir lediglich die Methode „ QWidget::mousePressEvent()“ neu implementieren, um Drag-and-Drop-Funktionen bereitzustellen.

Implementierung der Klasse „DragWidget“

Der Konstruktor von ` DragWidget ` setzt ein Attribut für das Widget, das sicherstellt, dass es beim Schließen gelöscht wird:

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);
}

Um das Ziehen aus dem Symbol heraus zu ermöglichen, müssen wir auf ein Mausklick-Ereignis reagieren. Dazu implementieren wir die Methode ` QWidget::mousePressEvent()` neu und richten ein ` QDrag `-Objekt ein.

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());

Da wir Pixmap-Daten für das Symbol sowie Informationen über den Klick des Benutzers im Symbol-Widget senden werden, erstellen wir ein ` QByteArray ` und verpacken die Details mithilfe eines ` QDataStream`.

Aus Gründen der Interoperabilität beschreiben Drag-and-Drop-Vorgänge die darin enthaltenen Daten mithilfe von MIME-Typen. In Qt beschreiben wir diese Daten mithilfe eines „ QMimeData “-Objekts:

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

Zu diesem Zweck wählen wir einen inoffiziellen MIME-Typ und übergeben den ` QByteArray ` an das MIME-Datenobjekt.

Der Drag-and-Drop-Vorgang selbst wird von einem ` QDrag `-Objekt abgewickelt:

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

Hier übergeben wir die Daten an das Drag-Objekt, legen eine Pixmap fest, die während des Vorgangs neben dem Cursor angezeigt wird, und definieren die Position eines Hotspots, der die Position dieser Pixmap unter dem Cursor platziert.

Beispielprojekt auf code.qt.io