How to move an QML object from one QML file to another, dynamically?

[TheIndependentAquarius]

This is the initial code:

import QtQuick 2.0
 
    Rectangle
    {
        id: container
        height: 300
        width: 300
 
        WindowA
        {
            x:0
            id: windowAId
            color: "green"
        }
 
        WindowB
        {
            id: windowBId
            anchors.top: windowAId.bottom
            anchors.topMargin: 10
            color: "black"
        }
 
        signal completed
 
        ListModel {
            id: fooModel
            ListElement { data: "red" }
        }
 
        Component.onCompleted: {
            console.log("Rect Completed!")
            container.completed()
        }
 
        Component
        {
            id: delg
            Item
            {
                Rectangle
                {
                    id: moveMe
                    height: 10; width: 10
                    border.width: 1; border.color: "black"
                    state: model.data
                    color: state
 
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            moveMe.state = (moveMe.state == "red" ? "blue" : "red")
                        }
                    }
 
                    states: [
                        State {
                            name: 'red'
                              ParentChange { target: moveMe; parent: windowAId; x: windowAId.x }
                        },
                        State {
                            name: 'blue'
                            ParentChange { target: moveMe; parent: windowBId; x: windowBId.x }
                        }
                    ]
                }
            }
        }
 
        Repeater {
            id: repeat
            model: fooModel
            delegate: delg
        }
    }

import QtQuick 2.0
    
    Rectangle
    {
        id: container
        height: 300
        width: 300
    
        WindowA
        {
            x:0
            id: windowAId
            color: "green"
        }
    
        WindowB
        {
            id: windowBId
            anchors.top: windowAId.bottom
            anchors.topMargin: 10
            color: "black"
        }
    
        signal completed
    
        ListModel {
            id: fooModel
            ListElement { data: "red" }
        }
    
        Component.onCompleted: {
            console.log("Rect Completed!")
            container.completed()
        }
    
        Component
        {
            id: delg
            Item
            {
                Rectangle
                {
                    id: moveMe
                    height: 10; width: 10
                    border.width: 1; border.color: "black"
                    state: model.data
                    color: state
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            moveMe.state = (moveMe.state == "red" ? "blue" : "red")
                        }
                    }
    
                    states: [
                        State {
                            name: 'red'
                              ParentChange { target: moveMe; parent: windowAId; x: windowAId.x }
                        },
                        State {
                            name: 'blue'
                            ParentChange { target: moveMe; parent: windowBId; x: windowBId.x }
                        }
                    ]
                }
            }
        }
    
        Repeater {
            id: repeat
            model: fooModel
            delegate: delg
        }
    }

To copy to clipboard, switch view to plain text mode 

It results in this:

2014-01-27-131146_1280x1024_scrot.png



How should I refer to WindowA and WindowB from this QML file if they are placed in a different QML file? (without using a loader)