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 2.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} }
       } //Image
   } //Item

} //Component

Main.qml import QtQuick 2.0 import QtQuick.Controls 2.2

ApplicationWindow {

   width: 640; height: 480
   color: "#222222"
   visible: true

   GridView {
       id: grid
       interactive: false
       anchors.fill: parent
       topMargin: 60
       bottomMargin: 60
       leftMargin: 140
       rightMargin: 140

       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
       onPositionChanged: {
           if (currentId !== -1 && index !== -1 && index !== newIndex)
               icons.move(newIndex, newIndex = index, 1)
       }
   }

}

Video

Relevant forum threads:
iOS Style Rearrange of Icons