Qt Quick Examples - Drag and Drop | QtQuick 5.3

- Qt 5.3
- Qt Quick
- Qt Quick Examples - Drag and Drop
- Qt 5.3.2 Reference Documentation

# Qt Quick Examples - Drag and Drop

This is a collection of QML drag and drop examples

Drag and Drop is a collection of small QML examples relating to drag and drop functionality. For more information, visit the Drag and Drop page.

## Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

## Tiles

Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.

It has a DragTile component which uses a MouseArea to move an item when dragged:

    Item {
        id: root
        property string colorKey

        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
                anchors.horizontalCenter: parent.horizontalCenter

                color: colorKey

                Drag.keys: [ colorKey ]
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: 32
                Drag.hotSpot.y: 32
                states: State {
                    when: mouseArea.drag.active
                    ParentChange { target: tile; parent: root }
                    AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
                }

            }
        }
    }

And a DropTile component which the dragged tiles can be dropped onto:

    DropArea {
        id: dragTarget

        property string colorKey
        property alias dropProxy: dragTarget

        width: 64; height: 64
        keys: [ colorKey ]

        Rectangle {
            id: dropRectangle

            anchors.fill: parent
            color: colorKey

            states: [
                State {
                    when: dragTarget.containsDrag
                    PropertyChanges {
                        target: dropRectangle
                        color: "grey"
                    }
                }
            ]
        }
    }

The keys property of the DropArea will only allow an item with a matching key in its Drag.keys property to be dropped on it.

## GridView

GridView adds drag and drop to a GridView, allowing you to reorder the list. It also uses a DelegateModel to move a delegate item to the position of another item it is dragged over.

        model: DelegateModel {
            delegate: MouseArea {
                id: delegateRoot

                property int visualIndex: DelegateModel.itemsIndex

                width: 80; height: 80
                drag.target: icon

                Rectangle {
                    id: icon
                    width: 72; height: 72
                    anchors {
                        horizontalCenter: parent.horizontalCenter;
                        verticalCenter: parent.verticalCenter
                    }
                    color: model.color
                    radius: 3

                    Drag.active: delegateRoot.drag.active
                    Drag.source: delegateRoot
                    Drag.hotSpot.x: 36
                    Drag.hotSpot.y: 36

                    states: [
                        State {
                            when: icon.Drag.active
                            ParentChange {
                                target: icon
                                parent: root
                            }

                            AnchorChanges {
                                target: icon;
                                anchors.horizontalCenter: undefined;
                                anchors.verticalCenter: undefined
                            }
                        }
                    ]
                }

                DropArea {
                    anchors { fill: parent; margins: 15 }

                    onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
                }
            }

Files:

- draganddrop/draganddrop.qml
- draganddrop/tiles/DragTile.qml
- draganddrop/tiles/DropTile.qml
- draganddrop/tiles/tiles.qml
- draganddrop/views/gridview.qml
- draganddrop/main.cpp
- draganddrop/draganddrop.pro
- draganddrop/draganddrop.qmlproject
- draganddrop/draganddrop.qrc