Drag and Drop example: Improve usage of best practices

Update the example by our coding conventions from our official
documentation.

- Fix qmllint warning.
- string are translated.
- JS statements no longer end with semi-colon.

Pick-to: 6.5 6.5.0
Change-Id: Ibdf6879e6474a976bbcff5d5e3c28c98db55e9e0
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

examples/quick/draganddrop/draganddrop.qml

@@ -11,8 +11,8 @@ Item {
         id: ll
         anchors.fill: parent
         Component.onCompleted: {
-            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"));
+            addExample(qsTr("Tiles"), qsTr("Press and drag tiles to move them into the matching colored boxes"),  Qt.resolvedUrl("tiles/tiles.qml"))
+            addExample(qsTr("GridView"), qsTr("Press and drag to re-order items in the grid"), Qt.resolvedUrl("views/gridview.qml"))
         }
     }
 }

examples/quick/draganddrop/tiles/DragTile.qml

@@ -10,12 +10,14 @@ Item {
     required property string colorKey
     required property int modelData
 
-    width: 64; height: 64
+    width: 64
+    height: 64
 
     MouseArea {
         id: mouseArea
 
-        width: 64; height: 64
+        width: 64
+        height: 64
         anchors.centerIn: parent
 
         drag.target: tile
@@ -25,9 +27,12 @@ Item {
         Rectangle {
             id: tile
 
-            width: 64; height: 64
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: 64
+            height: 64
+            anchors {
+                verticalCenter: parent.verticalCenter
+                horizontalCenter: parent.horizontalCenter
+            }
 
             color: root.colorKey
 
@@ -41,13 +46,19 @@ Item {
                 color: "white"
                 font.pixelSize: 48
                 text: root.modelData + 1
-                horizontalAlignment:Text.AlignHCenter
+                horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
             }
 //! [1]
             states: State {
                 when: mouseArea.drag.active
-                AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
+                AnchorChanges {
+                    target: tile
+                    anchors {
+                        verticalCenter: undefined
+                        horizontalCenter: undefined
+                    }
+                }
             }
         }
     }

examples/quick/draganddrop/tiles/DropTile.qml

@@ -9,7 +9,8 @@ DropArea {
 
     property string colorKey
 
-    width: 64; height: 64
+    width: 64
+    height: 64
     keys: [ colorKey ]
 
     Rectangle {

examples/quick/draganddrop/tiles/tiles.qml

@@ -14,22 +14,28 @@ Rectangle {
     Grid {
         id: redDestination
 
-        anchors.left: redSource.right; anchors.top: parent.top;
-        anchors.margins: 5
+        anchors {
+            left: redSource.right
+            top: parent.top
+            margins: 5
+        }
         width: 64*3
         height: 64*3
         opacity: 0.5
         columns: 3
 
         Repeater {
-            model: 9;
+            model: 9
             delegate: DropTile { colorKey: "red" }
         }
     }
 
     Grid {
-        anchors.right: blueSource.left; anchors.bottom: parent.bottom;
-        anchors.margins: 5
+        anchors {
+            right: blueSource.left
+            bottom: parent.bottom
+            margins: 5
+        }
         width: 64*3
         height: 64*3
 
@@ -46,8 +52,12 @@ Rectangle {
     Column {
         id: redSource
 
-        anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
-        anchors.margins: 5
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+            margins: 5
+        }
         width: 64
         spacing: -16
 
@@ -59,8 +69,12 @@ Rectangle {
     Column {
         id: blueSource
 
-        anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom
-        anchors.margins: 5
+        anchors {
+            right: parent.right
+            top: parent.top
+            bottom: parent.bottom
+            margins: 5
+        }
         width: 64
         spacing: -16
 

examples/quick/draganddrop/views/Icon.qml

@@ -41,8 +41,10 @@ Rectangle {
 
             AnchorChanges {
                 target: icon
-                anchors.horizontalCenter: undefined
-                anchors.verticalCenter: undefined
+                anchors {
+                    horizontalCenter: undefined
+                    verticalCenter: undefined
+                }
             }
         }
     ]

examples/quick/draganddrop/views/gridview.qml

@@ -1,17 +1,23 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
+pragma ComponentBehavior: Bound
 import QtQml
 import QtQuick
 import QtQml.Models
 
 GridView {
     id: root
-    width: 320; height: 480
-    cellWidth: 80; cellHeight: 80
+    width: 320
+    height: 480
+    cellWidth: 80
+    cellHeight: 80
 
     displaced: Transition {
-        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
+        NumberAnimation {
+            properties: "x,y"
+            easing.type: Easing.OutQuad
+        }
     }
 
 //! [0]
@@ -48,9 +54,10 @@ GridView {
 //! [1]
         delegate: DropArea {
             id: delegateRoot
-            required property color color;
+            required property color color
 
-            width: 80; height: 80
+            width: 80
+            height: 80
 
             onEntered: function(drag) {
                 visualModel.items.move((drag.source as Icon).visualIndex, icon.visualIndex)