Qt Quick 例 - ドラッグ＆ドロップ
こちらは、QMLのドラッグ＆ドロップに関するサンプル集です。
「ドラッグ＆ドロップ」は、ドラッグ＆ドロップ機能に関連するQMLの簡単なサンプル集です。詳細については、「ドラッグ＆ドロップ」のページをご覧ください。
例の動作確認
以下の手順でサンプルを実行できます：
- Qt Creator
Welcome モードを開き、Examples からサンプルを選択してください。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。
- Qt Extension for Visual Studio Code
Command Palette から「Qt: Open Qt examples 」コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code: チュートリアル「ビルドと実行」を参照してください。
Tiles
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
}
}© 2026 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.
