Qt Quick 例題 - ドラッグ&ドロップ

QMLのドラッグ&ドロップのサンプル集です。

ドラッグ&ドロップは、ドラッグ&ドロップ機能に関連する小さなQMLのサンプル集です。詳しくは、ドラッグ&ドロップのページをご覧ください。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳しくは、Building and Running an Exampleをご覧ください。

タイル

Tilesはシンプルな長方形にドラッグ&ドロップを追加し、特定のグリッドにドラッグできるようにします。

DragTile コンポーネントがあり、MouseArea を使ってアイテムをドラッグすると移動します:

Item {
    id: root

    required property string colorKey
    required property int modelData

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

            color: root.colorKey

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

また、ドラッグしたタイルをドロップできるDropTileコンポーネントもあります:

DropArea {
    id: dragTarget

    property string colorKey

    width: 64
    height: 64
    keys: [ colorKey ]

    Rectangle {
        id: dropRectangle

        anchors.fill: parent
        color: dragTarget.containsDrag ? "grey" : dragTarget.colorKey
    }
}

DropArea のkeysプロパティは、Drag.keysプロパティに一致するキーがある場合のみ、アイテムをドロップすることができます。

GridViewの例

GridView の例ではGridView にドラッグ&ドロップを追加し、ListModel を変更することなく、デリゲートを視覚的に並べ替えることができます。この例では、DelegateModel を使用して、デリゲート・アイテムをドラッグされた別のアイテムの位置に移動します。

    model: DelegateModel {
        delegate: DropArea {
            id: delegateRoot
            required property color color

            width: 80
            height: 80

            onEntered: function(drag) {
                visualModel.items.move((drag.source as Icon).visualIndex, icon.visualIndex)
            }

            property int visualIndex: DelegateModel.itemsIndex

            Icon {
                id: icon
                dragParent: root
                visualIndex: delegateRoot.visualIndex
                color: delegateRoot.color
            }
        }

サンプル・プロジェクト @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.