Drag and Drop within a GridView

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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