QML Drag & drop in a grid - drag-and-drop

Question

I have an item (a rectangle) which can be moved through the different positions of the grid (see code below).
The reference to decide whether the rectangle is in one cell or another is the top-left (x=0;y=0) of the rectangle. I want the reference to be the center of the rectangle. Any ideas?
Find the code below:
import QtQuick 2.5
import QtPositioning 5.5
import QtLocation 5.6
import QtGraphicalEffects 1.0
import QtQml 2.2
import QtQuick.Controls 1.0
Rectangle{
id: mainContainer
width:800; height:width
color: "red"
Grid {
id:gridA
anchors.centerIn: parent
width: parent.width; height:width;
columns: 2; rows: 2; spacing: 2
verticalItemAlignment: Grid.AlignHCenter
horizontalItemAlignment: Grid.AlignVCenter
Repeater {
id:cells
model: gridA.columns*gridA.rows
property int draggedItemIndex: -1
Rectangle {
width: gridA.width/gridA.columns; height: gridA.height/gridA.rows
color: "white"
DropArea {
id: dragTarget
property alias dropProxy: dragTarget
anchors.fill: parent
keys: [ "KEY_A" ]
Rectangle {
id: dropRectangle
anchors.fill: parent
states: [
State {
when: dragTarget.containsDrag
PropertyChanges { target: dropRectangle; color: "grey"}
PropertyChanges { target: cells; draggedItemIndex: index}
}
]
}
}
}
}
}
Rectangle{
id: icon
property var draggedIndex: 0
width: parent.width/3; height:width
color:"blue"
Drag.active: dragArea.drag.active
Drag.keys: [ "KEY_A" ]
MouseArea {
id: dragArea
anchors.fill: parent
drag.target: icon
cursorShape: drag.active ? Qt.ClosedHandCursor : Qt.OpenHandCursor
onReleased: {
console.log("Drag: " + cells.draggedItemIndex)
if (cells.draggedItemIndex != icon.draggedIndex) {
icon.draggedIndex = cells.draggedItemIndex
cells.draggedItemIndex = -1
}
icon.x = cells.itemAt(icon.draggedIndex).x
icon.y = cells.itemAt(icon.draggedIndex).y
}
}
}
}

Answer 1

You have the Drag-attached property, which has the hotSpot-property of type PointF.
Set this property to Qt.point(width / 2, height / 2)