Elaborate on drag and drop and model view examples with snippets.

Change-Id: I8a6874c4bb480ed9bcc59e743b97d439f053840e
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

4 files changed, 33 insertions, 7 deletions

diff --git a/examples/quick/draganddrop/draganddrop.qml b/examples/quick/draganddrop/draganddrop.qml
index 9f56177f23..f30ca7d70f 100644
--- a/examples/quick/draganddrop/draganddrop.qml
+++ b/examples/quick/draganddrop/draganddrop.qml
@@ -49,9 +49,27 @@ import "../../shared" as Examples
 
     This is a collection of small QML examples relating to drag and drop functionality.
 
-    Tiles adds drag and drog to simple rectangles, which you can drag into a specific grid.
+    \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.
 
-    GridView adds drag and drog to a GridView, allowing you to reorder the list.
+    It has a DragTile component which uses a MouseArea to move an item when dragged:
+
+    \snippet examples/quick/draganddrop/tiles/DragTile.qml 0
+    \snippet examples/quick/draganddrop/tiles/DragTile.qml 1
+
+    And a DropTile component which the dragged tiles can be dropped onto:
+
+    \snippet examples/quick/draganddrop/tiles/DropTile.qml 0
+
+    The keys property of the DropArea will only allow an item with matching key in
+    it's Drag.keys property to be dropped on it.
+
+    \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list.
+
+    It uses a VisualDataModel to move a delegate item to the position of another item
+    it is dragged over.
+
+    \snippet examples/quick/draganddrop/views/gridview.qml 0
+    \snippet examples/quick/draganddrop/views/gridview.qml 1
 */
 
 Item {
@@ -61,8 +79,8 @@ Item {
         id: ll
         anchors.fill: parent
         Component.onCompleted: {
-            addExample("Tiles", "",  Qt.resolvedUrl("tiles/tiles.qml"));
-            addExample("GridView", "", Qt.resolvedUrl("views/gridview.qml"));
+            addExample("Tiles", "Press and drag tiles to move them into the matching colored boxes",  Qt.resolvedUrl("tiles/tiles.qml"));
+            addExample("GridView", "Press and drag to re-order items in the grid", Qt.resolvedUrl("views/gridview.qml"));
         }
     }
 }
diff --git a/examples/quick/draganddrop/tiles/DragTile.qml b/examples/quick/draganddrop/tiles/DragTile.qml
index 1f4a8c2bea..f5e008a171 100644
--- a/examples/quick/draganddrop/tiles/DragTile.qml
+++ b/examples/quick/draganddrop/tiles/DragTile.qml
@@ -40,6 +40,7 @@
 
 import QtQuick 2.0
 
+//! [0]
 Item {
     id: root
     property string colorKey
@@ -69,7 +70,7 @@ Item {
             Drag.active: mouseArea.drag.active
             Drag.hotSpot.x: 32
             Drag.hotSpot.y: 32
-
+//! [0]
             Text {
                 anchors.fill: parent
                 color: "white"
@@ -78,13 +79,15 @@ Item {
                 horizontalAlignment:Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
-
+//! [1]
             states: State {
                 when: mouseArea.drag.active
                 ParentChange { target: tile; parent: root }
                 AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
             }
+
         }
     }
 }
+//! [1]
 
diff --git a/examples/quick/draganddrop/tiles/DropTile.qml b/examples/quick/draganddrop/tiles/DropTile.qml
index 98fedeb775..025f6df617 100644
--- a/examples/quick/draganddrop/tiles/DropTile.qml
+++ b/examples/quick/draganddrop/tiles/DropTile.qml
@@ -40,6 +40,7 @@
 
 import QtQuick 2.0
 
+//! [0]
 DropArea {
     id: dragTarget
 
@@ -66,3 +67,4 @@ DropArea {
         ]
     }
 }
+//! [0]
diff --git a/examples/quick/draganddrop/views/gridview.qml b/examples/quick/draganddrop/views/gridview.qml
index b18078f48d..d156ca0c48 100644
--- a/examples/quick/draganddrop/views/gridview.qml
+++ b/examples/quick/draganddrop/views/gridview.qml
@@ -49,7 +49,9 @@ GridView {
         NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
     }
 
+//! [0]
     model: VisualDataModel {
+//! [0]
         id: visualModel
         model: ListModel {
             id: colorModel
@@ -78,7 +80,7 @@ GridView {
             ListElement { color: "crimson" }
             ListElement { color: "teal" }
         }
-
+//! [1]
         delegate: MouseArea {
             id: delegateRoot
 
@@ -125,5 +127,6 @@ GridView {
                 onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
             }
         }
+//! [1]
     }
 }