Solved Obtain coordinates of dynamically created Component
-
I have a main drop area which when loaded creates a new rectangle component dynamically. The newly created rectangle component is draggable inside the drag area. But, I don't know how to get the coordinates of the new rectangle component on the drag area when the rectangle is dragged/dropped.
I somehow need the new coordinate data in the Drop Area code
Code for the Drop Area
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.3 Page{ id: page1 // On Dropped function onDropAreaDropped(drag){ console.log(JSON.stringify(drag)) } // On Entered function onDropAreaEntered(drag){ console.log(JSON.stringify(drag)) } // This is the Drop area code Rectangle{ id: dropRectangle color: "beige" width: parent.width height: parent.height DropArea { id: dropArea anchors.fill: parent onEntered: onDropAreaEntered(drag) onDropped: onDropAreaDropped(drag) } // This creates the new rectangle component Component.onCompleted: { var dynamicRectangle2 = Qt.createComponent("Test2.qml"); dynamicRectangle2.createObject(parent, {x:100, y: 100}) } } }
Code for
Test2.qml
- Rectangle componentimport QtQuick 2.15 import QtQuick.Controls 2.15 Page { id : somepageid Rectangle{ id:dragRect height: 40 width: 60 color: "blue" // Need this x and y coordinate data in the drop area component onXChanged: { console.log(dragRect.x) } onYChanged: { console.log(dragRect.y) } MouseArea{ id: mArea anchors.fill: parent drag.target: dragRect } } }
-
I have solved the problem by using
signals and slots
. I connected the signals emitted from Mouse actions in the new rectangle to the slots mentioned in the main area using// This creates the new rectangle component Component.onCompleted: { var dynamicRectangle2 = Qt.createComponent("Test2.qml"); // Assign new variable to the created object // Use this variable to connect the signals and slots var newRect = dynamicRectangle2.createObject(root, {x:100, y: 100}) newRect.dragged.connect(onDropAreaEntered) newRect.dropped.connect(onDropAreaDropped) }
Here are the complete codes
Drop Area
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.3 Page{ id: root // On Dropped function onDropAreaDropped(x,y){ console.log("Dropped" , x, y) } // On Entered function onDropAreaEntered(x,y){ console.log("Dragging" , x, y) } // This is the Drop area code Rectangle{ id: dropRectangle color: "beige" width: parent.width height: parent.height DropArea { id: dropArea anchors.fill: parent onEntered: onDropAreaEntered(drag) onDropped: onDropAreaDropped(drag) } // This creates the new rectangle component Component.onCompleted: { var dynamicRectangle2 = Qt.createComponent("Test2.qml"); // Assign new variable to the created object // Use this variable to connect the signals and slots var newRect = dynamicRectangle2.createObject(root, {x:100, y: 100}) newRect.dragged.connect(onDropAreaEntered) newRect.dropped.connect(onDropAreaDropped) } } }
Code for
Test2.qml
- Rectangle componentimport QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle{ id:dragRect height: 40 width: 60 color: "blue" signal dragged(double x, double y); signal dropped(double x, double y); MouseArea{ id: mArea anchors.fill: parent drag.target: dragRect onReleased: { dragRect.dropped(dragRect.x, dragRect.y) } onPositionChanged: { dragRect.dragged(dragRect.x, dragRect.y) } } }
-
I have solved the problem by using
signals and slots
. I connected the signals emitted from Mouse actions in the new rectangle to the slots mentioned in the main area using// This creates the new rectangle component Component.onCompleted: { var dynamicRectangle2 = Qt.createComponent("Test2.qml"); // Assign new variable to the created object // Use this variable to connect the signals and slots var newRect = dynamicRectangle2.createObject(root, {x:100, y: 100}) newRect.dragged.connect(onDropAreaEntered) newRect.dropped.connect(onDropAreaDropped) }
Here are the complete codes
Drop Area
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.3 Page{ id: root // On Dropped function onDropAreaDropped(x,y){ console.log("Dropped" , x, y) } // On Entered function onDropAreaEntered(x,y){ console.log("Dragging" , x, y) } // This is the Drop area code Rectangle{ id: dropRectangle color: "beige" width: parent.width height: parent.height DropArea { id: dropArea anchors.fill: parent onEntered: onDropAreaEntered(drag) onDropped: onDropAreaDropped(drag) } // This creates the new rectangle component Component.onCompleted: { var dynamicRectangle2 = Qt.createComponent("Test2.qml"); // Assign new variable to the created object // Use this variable to connect the signals and slots var newRect = dynamicRectangle2.createObject(root, {x:100, y: 100}) newRect.dragged.connect(onDropAreaEntered) newRect.dropped.connect(onDropAreaDropped) } } }
Code for
Test2.qml
- Rectangle componentimport QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle{ id:dragRect height: 40 width: 60 color: "blue" signal dragged(double x, double y); signal dropped(double x, double y); MouseArea{ id: mArea anchors.fill: parent drag.target: dragRect onReleased: { dragRect.dropped(dragRect.x, dragRect.y) } onPositionChanged: { dragRect.dragged(dragRect.x, dragRect.y) } } }