Drag and Drop within a GridView

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 ) 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 [[Image:= -1 && index |= -1 && index ]]= –1 && index != newIndex)
icons.move(newIndex, newIndex = index, 1)
}
}

Video

Relevant forum threads:
iOS Style Rearrange of Icons