Dragging from Listview to a droparea - qt

Question

I am following this example here Using drag and drop with ListView to create an inventory UI. However, I have broken down the components into a main section, Listview and a droparea. Everything is working except, I cannot get the ReferenceError: listView is not defined. Please help
Main area
import QtQuick 2.15
import QtQuick.Controls 2.15
Page{
id:dragRect
Rectangle {
id: root
width: 400
height: 400
ListViewElem{
}
DropAreaElem{}
}
}
ListViewElem
import QtQuick 2.15
ListViewElem {
id: listView
width: parent.width / 2
height: parent.height
property int dragItemIndex: -1
model: ListModel {
Component.onCompleted: {
for (var i = 0; i < 10; ++i) {
append({value: i});
}
}
}
delegate: Item {
id: delegateItem
width: listView.width
height: 50
Rectangle {
id: dragRect2
width: listView.width
height: 50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "salmon"
border.color: Qt.darker(color)
Text {
anchors.centerIn: parent
text: modelData
}
MouseArea {
id: mouseArea
anchors.fill: parent
drag.target: dragRect2
drag.onActiveChanged: {
if (mouseArea.drag.active) {
listView.dragItemIndex = index;
}
dragRect2.Drag.drop();
}
}
states: [
State {
when: dragRect2.Drag.active
ParentChange {
target: dragRect2
parent: root
}
AnchorChanges {
target: dragRect2
anchors.horizontalCenter: undefined
anchors.verticalCenter: undefined
}
}
]
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: dragRect2.width / 2
Drag.hotSpot.y: dragRect2.height / 2
}
}
}
DropAreaElem
import QtQuick 2.15
Rectangle {
width: parent.width / 2
height: parent.height
anchors.right: parent.right
color: "#aaff0011"
DropArea {
id: dropArea
anchors.fill: parent
onDropped: {
listView.model.remove(listView.dragItemIndex);
listView.dragItemIndex = -1;
}
}
}

Answer 1

You should provide id to your components
import QtQuick 2.15
import QtQuick.Controls 2.15
Page{
id:dragRect
Rectangle {
id: root
width: 400
height: 400
ListViewElem{
id: listView
}
DropAreaElem{
id: dropArea
}
}
}