Revision as of 12:56, 24 February 2015

English | 日本語 | Български

This wiki entry is created in response to a few forum threads (links at bottom) asking for this method. Feel free to contribute to this article with explanations or code.

Drag and Drop within a GridView

This example will demonstrate the iOS style ("video here":http://www.youtube.com/watch?v=qnXoGnUU6uI ) of dragging and dropping ListModel elements within a GridView.

There are three files in this example. One for the model (WidgetModel.qml), one for the delegate (IconItem.qml) and one for the GridView (Main.qml).

WidgetModel.qml
import QtQuick 1.0
ListModel {
 ListElement { icon: "Images/widget1.png"; gridId: 0}
 ListElement { icon: "Images/widget2.png"; gridId: 1}
 ListElement { icon: "Images/widget3.png"; gridId: 2}
 ListElement { icon: "Images/widget4.png"; gridId: 3}
 ListElement { icon: "Images/widget5.png"; gridId: 4}
 ListElement { icon: "Images/widget6.png"; gridId: 5}
 ListElement { icon: "Images/widget7.png"; gridId: 6}
 ListElement { icon: "Images/widget8.png"; gridId: 7}
 ListElement { icon: "Images/widget9.png"; gridId: 8}
}

IconItem.qml
import QtQuick 1.0
Component {
 Item {
  id: main
  width: grid.cellWidth; height: grid.cellHeight
  Image {
   id: item; parent: loc
 x: main.x + 5; y: main.y + 5
 width: main.width - 10; height: main.height - 10;
 fillMode: Image.PreserveAspectFit; smooth: true
 source: icon
 Rectangle {
 anchors.fill: parent;
 border.color: "#326487"; border.width: 6
 color: "transparent"; radius: 5
 visible: item.state  "active"}
Behavior on x { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack }
 }
Behavior on y { enabled: item.state != "active"; NumberAnimation { duration: 400; easing.type: Easing.OutBack }
 }
SequentialAnimation on rotation {NumberAnimation { to:  2; duration: 60 }
NumberAnimation { to: -2; duration: 120 }
NumberAnimation { to:  0; duration: 60 }
running: loc.currentId != -1 && item.state != "active"loops: Animation.Infinite; alwaysRunToEnd: true}
states: State {name: "active"; when: loc.currentId  gridId
 PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 10 }
 }
 transitions: Transition { NumberAnimation { property: "scale"; duration: 200} }
 }
 }
}

Main.qml
import QtQuick 1.0
Rectangle {
 width: 640; height: 480
 color: "#222222"
 GridView {
  id: grid
  interactive: false
  anchors {
  topMargin: 60; bottomMargin: 60
  leftMargin: 140; rightMargin: 140
  fill: parent
 }
 cellWidth: 120; cellHeight: 120;
 model: WidgetModel { id: icons }
 delegate: IconItem { }
 MouseArea {
 property int currentId: –1 // Original position in model
 property int newIndex // Current Position in model
 property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor
 id: loc
 anchors.fill: parent
 onPressAndHold: currentId = icons.get(newIndex = index).gridId
 onReleased: currentId = –1
 onMousePositionChanged:
 if (loc.currentId = -1 && index= –1 && index != newIndex)
 icons.move(newIndex, newIndex = index, 1)
 }
 }
}

Video
[YouTubeID:4tt5hQYS4Fo]

Relevant forum threads:
"iOS Style Rearrange of Icons":http://developer.qt.nokia.com/forums/viewthread/2327/

@@ Line 11: / Line 11: @@
   '''WidgetModel.qml'''<br /><code>import QtQuick 1.0<br />ListModel {<br /> ListElement { icon: &quot;Images/widget1.png&quot;; gridId: 0}<br /> ListElement { icon: &quot;Images/widget2.png&quot;; gridId: 1}<br /> ListElement { icon: &quot;Images/widget3.png&quot;; gridId: 2}<br /> ListElement { icon: &quot;Images/widget4.png&quot;; gridId: 3}<br /> ListElement { icon: &quot;Images/widget5.png&quot;; gridId: 4}<br /> ListElement { icon: &quot;Images/widget6.png&quot;; gridId: 5}<br /> ListElement { icon: &quot;Images/widget7.png&quot;; gridId: 6}<br /> ListElement { icon: &quot;Images/widget8.png&quot;; gridId: 7}<br /> ListElement { icon: &quot;Images/widget9.png&quot;; gridId: 8}<br />}</code>
-  '''IconItem.qml'''<br /><code>import QtQuick 1.0<br />Component {<br /> Item {<br /> id: main<br /> width: grid.cellWidth; height: grid.cellHeight<br /> Image {<br /> id: item; parent: loc<br /> x: main.x + 5; y: main.y + 5<br /> width: main.width - 10; height: main.height - 10;<br /> fillMode: Image.PreserveAspectFit; smooth: true<br /> source: icon<br /> Rectangle {<br /> anchors.fill: parent;<br /> border.color: &quot;#326487&quot;; border.width: 6<br /> color: &quot;transparent&quot;; radius: 5<br /> visible: item.state  &quot;active&quot;
+  '''IconItem.qml'''<br /><code>import QtQuick 1.0<br />Component {<br /> Item {<br />  id: main<br />  width: grid.cellWidth; height: grid.cellHeight<br />  Image {<br />   id: item; parent: loc<br /> x: main.x + 5; y: main.y + 5<br /> width: main.width - 10; height: main.height - 10;<br /> fillMode: Image.PreserveAspectFit; smooth: true<br /> source: icon<br /> Rectangle {<br /> anchors.fill: parent;<br /> border.color: &quot;#326487&quot;; border.width: 6<br /> color: &quot;transparent&quot;; radius: 5<br /> visible: item.state  &quot;active&quot;&#125;<br />Behavior on x &#123; enabled: item.state != &quot;active&quot;; NumberAnimation &#123; duration: 400; easing.type: Easing.OutBack &#125;<br /> &#125;<br />Behavior on y &#123; enabled: item.state != &quot;active&quot;; NumberAnimation &#123; duration: 400; easing.type: Easing.OutBack &#125;<br /> &#125;<br />SequentialAnimation on rotation &#123;NumberAnimation &#123; to:  2; duration: 60 &#125;<br />NumberAnimation &#123; to: -2; duration: 120 &#125;<br />NumberAnimation &#123; to:  0; duration: 60 &#125;<br />running: loc.currentId != -1 &amp;&amp; item.state != &quot;active&quot;loops: Animation.Infinite; alwaysRunToEnd: true&#125;<br />states: State &#123;name: &quot;active&quot;; when: loc.currentId  gridId<br /> PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 10 }<br /> }<br /> transitions: Transition { NumberAnimation { property: &quot;scale&quot;; duration: 200} }<br /> }<br /> }<br />}</code>
-            &#125;
-            Behavior on x &#123; enabled: item.state != &quot;active&quot;; NumberAnimation &#123; duration: 400; easing.type: Easing.OutBack &#125; &#125;
+ '''Main.qml'''<br /><code>import QtQuick 1.0<br />Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&quot;<br /> GridView {<br />  id: grid<br />  interactive: false<br />  anchors {<br />  topMargin: 60; bottomMargin: 60<br />  leftMargin: 140; rightMargin: 140<br />  fill: parent<br /> }<br /> cellWidth: 120; cellHeight: 120;<br /> model: WidgetModel { id: icons }<br /> delegate: IconItem { }<br /> MouseArea {<br /> property int currentId: –1 // Original position in model<br /> property int newIndex // Current Position in model<br /> property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor<br /> id: loc<br /> anchors.fill: parent<br /> onPressAndHold: currentId = icons.get(newIndex = index).gridId<br /> onReleased: currentId = –1<br /> onMousePositionChanged:<br /> if (loc.currentId [[Image:= -1 &amp;&amp; index |= -1 &amp;&amp; index ]]= –1 &amp;&amp; index != newIndex)<br /> icons.move(newIndex, newIndex = index, 1)<br /> }<br /> }<br />}</code>
-            Behavior on y &#123; enabled: item.state != &quot;active&quot;; NumberAnimation &#123; duration: 400; easing.type: Easing.OutBack &#125; &#125;
-            SequentialAnimation on rotation &#123;
-                NumberAnimation &#123; to:  2; duration: 60 &#125;
-                NumberAnimation &#123; to: -2; duration: 120 &#125;
-                NumberAnimation &#123; to:  0; duration: 60 &#125;
-                running: loc.currentId != -1 &amp;amp;&amp;amp; item.state != &quot;active&quot;
-                loops: Animation.Infinite; alwaysRunToEnd: true
-            &#125;
-            states: State &#123;
-                name: &quot;active&quot;; when: loc.currentId  gridId<br /> PropertyChanges { target: item; x: loc.mouseX - width/2; y: loc.mouseY - height/2; scale: 0.5; z: 10 }<br /> }<br /> transitions: Transition { NumberAnimation { property: &quot;scale&quot;; duration: 200} }<br /> }<br /> }<br />}</code>
- '''Main.qml'''<br /><code>import QtQuick 1.0<br />Rectangle {<br /> width: 640; height: 480<br /> color: &quot;#222222&quot;<br /> GridView {<br /> id: grid<br /> interactive: false<br /> anchors {<br /> topMargin: 60; bottomMargin: 60<br /> leftMargin: 140; rightMargin: 140<br /> fill: parent<br /> }<br /> cellWidth: 120; cellHeight: 120;<br /> model: WidgetModel { id: icons }<br /> delegate: IconItem { }<br /> MouseArea {<br /> property int currentId: –1 // Original position in model<br /> property int newIndex // Current Position in model<br /> property int index: grid.indexAt(mouseX, mouseY) // Item underneath cursor<br /> id: loc<br /> anchors.fill: parent<br /> onPressAndHold: currentId = icons.get(newIndex = index).gridId<br /> onReleased: currentId = –1<br /> onMousePositionChanged:<br /> if (loc.currentId [[Image:= -1 &amp;&amp; index |= -1 &amp;&amp; index ]]= –1 &amp;&amp; index != newIndex)<br /> icons.move(newIndex, newIndex = index, 1)<br /> }<br /> }<br />}</code>
 '''Video'''<br />[YouTubeID:4tt5hQYS4Fo]
 Relevant forum threads:<br />&quot;iOS Style Rearrange of Icons&quot;:http://developer.qt.nokia.com/forums/viewthread/2327/