Why drag and drop not working - qt

Question

This is the basic example I found on qt doc. In tile Rectangle, i add anchors.fill: parent and commented all 3 lines below that because I feel like all those 3 line can be covered by anchors.fill: parent. But once I do that I cannot drag the element anymore.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
Item {
id: root
width: 64; height: 64
MouseArea {
id: mouseArea
anchors.fill: parent
anchors.centerIn: parent
drag.target: tile
onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root
Rectangle {
id: tile
anchors.fill: parent
// width: 64; height: 64
// anchors.verticalCenter: parent.verticalCenter
// anchors.horizontalCenter: parent.horizontalCenter
color: "red"
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: 32
Drag.hotSpot.y: 32
states: State {
when: mouseArea.drag.active
ParentChange { target: tile; parent: root }
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}
}
}
}
}
Why filling the rectangle of the parent disables the drag and drop functionality?

Answer 1

You anchor a boat so that it is fixed at something. If you want to move it, you will need to break the anchor or pull the thing you anchored it to, with you.
That is what an anchor is for - to fix the anchored object to some other object. If you want to have it movable, you can't anchor it.
You still have the dragged object the same size as your parent, by setting:
width: parent.width
height: parent.height
But though it is the same size, once you move it, it will obviously not fill the parent anymore.
Now you might say:
"But hey! They do anchor the object, too!"
Yes, they do, but there are also the lines:
states: State {
when: mouseArea.drag.active
ParentChange { target: tile; parent: root }
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}
which will lift the anchor when the tile is being dragged.