Modify grid example to use DragHandler

It shows that DnD is still possible even though DragHandler doesn't
do anything specifically to enable it.

Change-Id: I600e16c4f0f601d504fcf6b6b32ff865af2a2d67
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

1 files changed, 23 insertions, 17 deletions

diff --git a/examples/quick/draganddrop/views/gridview.qml b/examples/quick/draganddrop/views/gridview.qml
index d436b19832..6c5bcef729 100644
--- a/examples/quick/draganddrop/views/gridview.qml
+++ b/examples/quick/draganddrop/views/gridview.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017 The Qt Company Ltd.
+** Copyright (C) 2018 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the examples of the Qt Toolkit.
@@ -48,7 +48,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.12
 import QtQml.Models 2.1
 
 GridView {
@@ -92,26 +92,38 @@ GridView {
             ListElement { color: "teal" }
         }
 //! [1]
-        delegate: MouseArea {
+        delegate: DropArea {
             id: delegateRoot
 
-            property int visualIndex: DelegateModel.itemsIndex
-
             width: 80; height: 80
-            drag.target: icon
+
+            onEntered: visualModel.items.move(drag.source.visualIndex, icon.visualIndex)
+            property int visualIndex: DelegateModel.itemsIndex
+            Binding { target: icon; property: "visualIndex"; value: visualIndex }
 
             Rectangle {
                 id: icon
+                property int visualIndex: 0
                 width: 72; height: 72
                 anchors {
                     horizontalCenter: parent.horizontalCenter;
                     verticalCenter: parent.verticalCenter
                 }
-                color: model.color
                 radius: 3
+                color: model.color
+
+                Text {
+                    anchors.centerIn: parent
+                    color: "white"
+                    text: parent.visualIndex
+                }
+
+                DragHandler {
+                    id: dragHandler
+                }
 
-                Drag.active: delegateRoot.drag.active
-                Drag.source: delegateRoot
+                Drag.active: dragHandler.active
+                Drag.source: icon
                 Drag.hotSpot.x: 36
                 Drag.hotSpot.y: 36
 
@@ -124,19 +136,13 @@ GridView {
                         }
 
                         AnchorChanges {
-                            target: icon;
-                            anchors.horizontalCenter: undefined;
+                            target: icon
+                            anchors.horizontalCenter: undefined
                             anchors.verticalCenter: undefined
                         }
                     }
                 ]
             }
-
-            DropArea {
-                anchors { fill: parent; margins: 15 }
-
-                onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
-            }
         }
 //! [1]
     }