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

8 files changed, 620 insertions, 0 deletions

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"
+            }
+        }
+    }
+}