diff options
Diffstat (limited to 'examples/declarative/dragtarget/lists/listmodel.qml')
| -rw-r--r-- | examples/declarative/dragtarget/lists/listmodel.qml | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/examples/declarative/dragtarget/lists/listmodel.qml b/examples/declarative/dragtarget/lists/listmodel.qml new file mode 100644 index 0000000000..50b1d397c7 --- /dev/null +++ b/examples/declarative/dragtarget/lists/listmodel.qml @@ -0,0 +1,256 @@ +import QtQuick 2.0 + + +Rectangle { + id: root + color: "grey" + + width: 720 + height: 380 + + Component { + id: draggedText + Text { + x: rootTarget.dragX - 10 + y: rootTarget.dragY - 10 + width: 20 + height: 20 + + text: rootTarget.dragData.display + font.pixelSize: 18 + } + } + + DragTarget { + id: rootTarget + + anchors.fill: parent + } + + Loader { + anchors.fill: parent + sourceComponent: rootTarget.containsDrag ? draggedText : undefined + } + + GridView { + id: gridView + + width: 240 + height: 360 + + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + anchors.margins: 10 + + cellWidth: 60 + cellHeight: 60 + + model: ListModel { + id: gridModel + + ListElement { display: "1" } + ListElement { display: "2" } + ListElement { display: "3" } + ListElement { display: "4" } + ListElement { display: "5" } + ListElement { display: "6" } + ListElement { display: "7" } + ListElement { display: "8" } + ListElement { display: "9" } + ListElement { display: "10" } + ListElement { display: "11" } + ListElement { display: "12" } + ListElement { display: "13" } + ListElement { display: "14" } + ListElement { display: "15" } + ListElement { display: "16" } + ListElement { display: "17" } + ListElement { display: "18" } + ListElement { display: "19" } + ListElement { display: "20" } + ListElement { display: "21" } + ListElement { display: "22" } + ListElement { display: "23" } + ListElement { display: "24" } + } + + delegate: Rectangle { + id: root + + width: 60 + height: 60 + + color: "black" + + Text { + anchors.fill: parent + color: draggable.drag.active ? "gold" : "white" + text: display + font.pixelSize: 16 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: draggable + + property int initialIndex + + width: 60 + height: 60 + + drag.data: model + drag.keys: ["grid"] + drag.target: draggable + + states: State { + when: !draggable.drag.active + PropertyChanges { target: draggable; x: 0; y: 0 } + } + } + } + + DragTarget { + anchors.fill: parent + + keys: [ "grid" ] + onPositionChanged: { + var index = gridView.indexAt(drag.x, drag.y) + if (index != -1) + gridModel.move(drag.data.index, index, 1) + } + } + + DragTarget { + property int dragIndex + anchors.fill: parent + + keys: [ "list" ] + onEntered: { + dragIndex = gridView.indexAt(drag.x, drag.y) + if (dragIndex != -1) { + gridModel.insert(dragIndex, { "display": drag.data.display }) + } else { + event.accepted = false + } + } + onPositionChanged: { + var index = gridView.indexAt(drag.x, drag.y); + if (index != -1) { + gridModel.move(dragIndex, index, 1) + dragIndex = index + } + } + onExited: gridModel.remove(dragIndex, 1) + } + } + + ListView { + id: listView + + width: 240 + height: 360 + + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.margins: 10 + + model: ListModel { + id: listModel + + ListElement { display: "a" } + ListElement { display: "b" } + ListElement { display: "c" } + ListElement { display: "d"} + ListElement { display: "e" } + ListElement { display: "f" } + ListElement { display: "g" } + ListElement { display: "h" } + ListElement { display: "i" } + ListElement { display: "j" } + ListElement { display: "k" } + ListElement { display: "l" } + ListElement { display: "m" } + ListElement { display: "n" } + ListElement { display: "o" } + ListElement { display: "p" } + ListElement { display: "q" } + ListElement { display: "r" } + ListElement { display: "s" } + ListElement { display: "t" } + ListElement { display: "u" } + ListElement { display: "v" } + ListElement { display: "w" } + ListElement { display: "x" } + } + + delegate: Rectangle { + id: root + + width: 240 + height: 15 + + color: "black" + + Text { + anchors.fill: parent + color: draggable.drag.active ? "gold" : "white" + text: display + font.pixelSize: 12 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: draggable + + width: 240 + height: 15 + + drag.data: model + drag.keys: ["list"] + drag.target: draggable + + states: State { + when: !draggable.drag.active + PropertyChanges { target: draggable; x: 0; y: 0 } + } + } + } + + DragTarget { + anchors.fill: parent + + keys: [ "list" ] + onPositionChanged: { + var index = listView.indexAt(drag.x, drag.y) + if (index != -1) + listModel.move(drag.data.index, index, 1) + } + } + + DragTarget { + property int dragIndex + anchors.fill: parent + + keys: [ "grid" ] + + onEntered: { + dragIndex = listView.indexAt(drag.x, drag.y) + if (dragIndex != -1) { + listModel.insert(dragIndex, { "display": drag.data.display }) + } else { + event.accepted = false + } + } + onPositionChanged: { + var index = listView.indexAt(drag.x, drag.y); + if (index != -1) { + listModel.move(dragIndex, index, 1) + dragIndex = index + } + } + onExited: listModel.remove(dragIndex, 1) + } + } +} |