QML拖放網格

Question

我有一個項目（一個矩形），可以通過網格的不同位置移動（見下面的代碼）。

決定矩形是在一個單元格還是另一個單元格中的參考是矩形的左上角（x = 0; y = 0）。我想引用是矩形的中心。有任何想法嗎？

找到下面的代碼：

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

你有Drag -attached屬性，它有hotSpot -property PointF類型。

將此屬性設置爲Qt.point(width/2, height/2)