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는 단순한 사각형에 드래그 앤 드롭 기능을 추가하여, 이를 특정 그리드 안으로 드래그할 수 있게 해줍니다.
이 컴포넌트에는 드래그 시 MouseArea 을 사용하여 항목을 이동하는 DragTile 컴포넌트가 포함되어 있습니다:
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.
