From 73081387d84c4b77dafeda927d1fc1ebee6cfdf2 Mon Sep 17 00:00:00 2001 From: Andrew den Exter Date: Thu, 9 Jun 2011 18:29:50 +1000 Subject: Add a DragTarget element. Provides an area that can be used to handle events when other items are dragged over it. Task-number: QMLNG-32 --- .../declarative/dragtarget/dragtarget.qmlproject | 16 ++ .../declarative/dragtarget/lists/listmodel.qml | 256 +++++++++++++++++++++ .../declarative/dragtarget/lists/lists.qmlproject | 16 ++ examples/declarative/dragtarget/text/dragtext.qml | 142 ++++++++++++ .../declarative/dragtarget/text/text.qmlproject | 16 ++ examples/declarative/dragtarget/tiles/DragTile.qml | 59 +++++ examples/declarative/dragtarget/tiles/DropTile.qml | 30 +++ examples/declarative/dragtarget/tiles/tiles.qml | 85 +++++++ 8 files changed, 620 insertions(+) create mode 100644 examples/declarative/dragtarget/dragtarget.qmlproject create mode 100644 examples/declarative/dragtarget/lists/listmodel.qml create mode 100644 examples/declarative/dragtarget/lists/lists.qmlproject create mode 100644 examples/declarative/dragtarget/text/dragtext.qml create mode 100644 examples/declarative/dragtarget/text/text.qmlproject create mode 100644 examples/declarative/dragtarget/tiles/DragTile.qml create mode 100644 examples/declarative/dragtarget/tiles/DropTile.qml create mode 100644 examples/declarative/dragtarget/tiles/tiles.qml (limited to 'examples') diff --git a/examples/declarative/dragtarget/dragtarget.qmlproject b/examples/declarative/dragtarget/dragtarget.qmlproject new file mode 100644 index 0000000000..d4909f8685 --- /dev/null +++ b/examples/declarative/dragtarget/dragtarget.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} 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) + } + } +} diff --git a/examples/declarative/dragtarget/lists/lists.qmlproject b/examples/declarative/dragtarget/lists/lists.qmlproject new file mode 100644 index 0000000000..d4909f8685 --- /dev/null +++ b/examples/declarative/dragtarget/lists/lists.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/dragtarget/text/dragtext.qml b/examples/declarative/dragtarget/text/dragtext.qml new file mode 100644 index 0000000000..c4a4f24f74 --- /dev/null +++ b/examples/declarative/dragtarget/text/dragtext.qml @@ -0,0 +1,142 @@ +import QtQuick 2.0 + +Item { + id: root + width: 320; height: 480 + + Rectangle { + id: inputRect + anchors.left: parent.left; anchors.right: parent.right; anchors.top: parent.top + anchors.margins: 2 + height: input.implicitHeight + 4 + + border.width: 1 + + TextInput { + id: input + anchors.fill: parent; anchors.margins: 2 + + text: "the quick brown fox jumped over the lazy dog" + + DragTarget { + id: inputTarget + + anchors.fill: parent + + Component { + id: draggedInputText + Text { + x: inputTarget.dragX + y: inputTarget.dragY + text: inputTarget.dragData + color: "blue" + font: input.font + } + } + + Loader { + sourceComponent: parent.containsDrag ? draggedInputText : undefined + } + } + + + MouseArea { + id: inputDraggable + + anchors.fill: parent + enabled: input.selectionStart != input.selectionEnd + + drag.data: input.selectedText + drag.target: inputDraggable + + drag.onDragged: { + var position = input.positionAt(mouse.x); + mouse.accepted = position >= input.selectionStart && position < input.selectionEnd + } + + MouseArea { + anchors.fill: parent + + onPressed: { + var position = input.positionAt(mouse.x); + if (position < input.selectionStart || position >= input.selectionEnd) { + input.cursorPosition = position + } else { + mouse.accepted = false + } + } + onPositionChanged: input.moveCursorSelection(input.positionAt(mouse.x)) + } + } + } + } + + Rectangle { + id: editRect + anchors.left: parent.left; anchors.right: parent.right; + anchors.top: inputRect.bottom; anchors.bottom: parent.bottom + anchors.margins: 2 + + border.width: 1 + + TextEdit { + id: edit + anchors.fill: parent; anchors.margins: 2 + + text: "the quick brown fox jumped over the lazy dog" + font.pixelSize: 18 + wrapMode: TextEdit.WordWrap + + DragTarget { + id: editTarget + + anchors.fill: parent + + + Component { + id: draggedEditText + Text { + x: editTarget.dragX + y: editTarget.dragY + text: editTarget.dragData + color: "red" + font: edit.font + } + } + + Loader { + sourceComponent: parent.containsDrag ? draggedEditText : undefined + } + } + + MouseArea { + id: editDraggable + + anchors.fill: parent + enabled: edit.selectionStart != edit.selectionEnd + + drag.data: edit.selectedText + drag.target: editDraggable + + drag.onDragged: { + var position = edit.positionAt(mouse.x, mouse.y); + mouse.accepted = position >= edit.selectionStart && position < edit.selectionEnd + } + + MouseArea { + anchors.fill: parent + + onPressed: { + var position = edit.positionAt(mouse.x, mouse.y); + if (position < edit.selectionStart || position >= edit.selectionEnd) { + edit.cursorPosition = position + } else { + mouse.accepted = false + } + } + onPositionChanged: edit.moveCursorSelection(edit.positionAt(mouse.x, mouse.y)) + } + } + } + } +} diff --git a/examples/declarative/dragtarget/text/text.qmlproject b/examples/declarative/dragtarget/text/text.qmlproject new file mode 100644 index 0000000000..d4909f8685 --- /dev/null +++ b/examples/declarative/dragtarget/text/text.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/dragtarget/tiles/DragTile.qml b/examples/declarative/dragtarget/tiles/DragTile.qml new file mode 100644 index 0000000000..213373a392 --- /dev/null +++ b/examples/declarative/dragtarget/tiles/DragTile.qml @@ -0,0 +1,59 @@ +import QtQuick 2.0 + +Rectangle { + id: dragRectangle + + property Item dropTarget + + property string colorKey + + color: colorKey + + width: 100; height: 100 + + Text { + anchors.fill: parent + color: "white" + font.pixelSize: 90 + text: modelData + 1 + horizontalAlignment:Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + + MouseArea { + id: draggable + + anchors.fill: parent + + drag.target: parent + drag.keys: [ colorKey ] + + drag.onDropped: dropTarget = dropItem + + states: [ + State { + when: dragRectangle.dropTarget != undefined && !draggable.drag.active + ParentChange { + target: dragRectangle + parent: dropTarget + x: 0 + y: 0 + } + }, + State { + when: dragRectangle.dropTarget != undefined && draggable.drag.active + ParentChange { + target: dragRectangle + parent: dropTarget + } + }, + State { + when: !draggable.drag.active + AnchorChanges { + target: dragRectangle + anchors.horizontalCenter: parent.horizontalCenter + } + } + ] + } +} diff --git a/examples/declarative/dragtarget/tiles/DropTile.qml b/examples/declarative/dragtarget/tiles/DropTile.qml new file mode 100644 index 0000000000..9d968753db --- /dev/null +++ b/examples/declarative/dragtarget/tiles/DropTile.qml @@ -0,0 +1,30 @@ +import QtQuick 2.0 + +Rectangle { + id: dropRectangle + + property string colorKey + + color: colorKey + + width: 100; height: 100 + + DragTarget { + id: dragTarget + + anchors.fill: parent + + keys: [ colorKey ] + dropItem: dropRectangle + } + + states: [ + State { + when: dragTarget.containsDrag + PropertyChanges { + target: dropRectangle + color: "grey" + } + } + ] +} diff --git a/examples/declarative/dragtarget/tiles/tiles.qml b/examples/declarative/dragtarget/tiles/tiles.qml new file mode 100644 index 0000000000..d8bcb39bd2 --- /dev/null +++ b/examples/declarative/dragtarget/tiles/tiles.qml @@ -0,0 +1,85 @@ +import QtQuick 2.0 + +Rectangle { + id: root + + width: 620 + height: 410 + + color: "black" + + DragTarget { + id: resetTarget + + anchors.fill: parent + } + + Grid { + id: redDestination + + anchors.left: redSource.right; anchors.top: parent.top; + anchors.margins: 5 + width: 300 + height: 300 + + opacity: 0.5 + + columns: 3 + + Repeater { + model: 9 + delegate: DropTile { + colorKey: "red" + } + } + } + + Grid { + id: blueDestination + + anchors.right: blueSource.left; anchors.bottom: parent.bottom; + anchors.margins: 5 + width: 300 + height: 300 + + opacity: 0.5 + + columns: 3 + + Repeater { + model: 9 + delegate: DropTile { + colorKey: "blue" + } + } + } + + Column { + id: redSource + + anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom + anchors.margins: 5 + width: 100 + + Repeater { + model: 9 + delegate: DragTile { + colorKey: "red" + } + } + } + Column { + id: blueSource + + anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom + anchors.margins: 5 + width: 100 + + Repeater { + model: 9 + delegate: DragTile { + colorKey: "blue" + } + } + } +} -- cgit v1.2.3