|  | Home · Examples

# Draggable Icons Example

Code:

- DraggableIcons.java

The Draggable Icons example shows how to drag and drop image data between widgets in the same application, and between different applications.
In many situations where drag and drop is used, the user starts dragging from a particular widget and drops the payload onto another widget. In this example, we subclass QLabel to create labels that we use as drag sources, and place them inside QWidgets that serve as both containers and drop sites.

In addition, when a drag and drop operation occurs, we want to send more than just an image. We also want to send information about where the user clicked in the image so that the user can place it precisely on the drop target. This level of detail means that we must create a custom MIME type for our data.

## DragWidget Class

The icon widgets that we use to display icons are subclassed from QLabel; they are set up in the constructor:

        public DraggableIcons()
        {
            setMinimumSize(200, 200);
            setFrameStyle(QFrame.Shadow.Sunken.value() | QFrame.Shape.StyledPanel.value());
            setAcceptDrops(true);

            QLabel boatIcon = new QLabel(this);
            boatIcon.setPixmap(new QPixmap("classpath:com/trolltech/examples/images/boat.png"));
            boatIcon.move(20, 20);

            QLabel carIcon = new QLabel(this);
            carIcon.setPixmap(new QPixmap("classpath:com/trolltech/examples/images/car.png"));
            carIcon.move(120, 20);

            QLabel houseIcon = new QLabel(this);
            houseIcon.setPixmap(new QPixmap("classpath:com/trolltech/examples/images/house.png"));
            houseIcon.move(20, 120);
        }

To enable dragging from the icon, we need to act on a mouse press event. We do this by reimplementing QWidget::mousePressEvent() and setting up a QDrag object.

        protected void mousePressEvent(QMouseEvent event)
        {
            QLabel child = (QLabel) childAt(event.pos());
            if (child == null)
                return;

            QPixmap pixmap = child.pixmap();

            QByteArray itemData = new QByteArray();
            QDataStream dataStream = new QDataStream(itemData, QIODevice.OpenModeFlag.WriteOnly);
            pixmap.writeTo(dataStream);
            event.pos().subtract(child.pos()).writeTo(dataStream);

Since we will be sending pixmap data for the icon and information about the user's click in the icon widget, we construct a QByteArray and package up the details using a QDataStream.

For interoperability, drag and drop operations describe the data they contain using MIME types. In Qt Jambi, we describe this data using a QMimeData object:

            com.trolltech.qt.core.QMimeData mimeData = new com.trolltech.qt.core.QMimeData();
            mimeData.setData("application/x-dnditemdata", itemData);

We choose an unofficial MIME type for this purpose, and supply the QByteArray to the MIME data object.

The drag and drop operation itself is handled by a QDrag object:

            QDrag drag = new QDrag(this);
            drag.setMimeData(mimeData);
            drag.setPixmap(pixmap);
            drag.setHotSpot(event.pos().subtract(child.pos()));

Here, we pass the data to the drag object, set a pixmap that will be shown alongside the cursor during the operation, and define the position of a hot spot that places the position of this pixmap under the cursor.