z index not working for dynamic elements

exru

This is example with dynamic elements is working correctly. But i need what red circile be always on top for each squares on dragging, but even explicit z index not helps. How to do that?

Rectangle{

            anchors.top: parent.top
            anchors.left: schemesList.right
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            color: "transparent"

            Component{

                id: item

                Rectangle{
                    x: 200
                    y: 100
                    z: 0 
                    height: 40
                    width: 180
                    color: dragTarget.containsDrag ?  "blue" :  "red"

                    MouseArea{
                        anchors.fill: parent
                        drag.target: parent
                    }

                    DropArea{
                        id: dragTarget
                        anchors.fill: parent
                    }

                    Rectangle{
                        id: tg
                        x: -width
                        y: height / 2
                        z: 1
                        width: 20
                        height: 20
                        radius: 100

                        color: mouseArea.drag.active ? "green" : "red"
                        Drag.active: mouseArea.drag.active

                        MouseArea{
                            id: mouseArea
                            anchors.fill: parent
                            drag.target: parent
                        }

                    }

                }

            }

            Component.onCompleted: {
                item.createObject(parent, {z: 0});
                item.createObject(parent, {y:200, z: 0});
                 item.createObject(parent, {y:300, z: 0});
            }
        }

exru

@J-Hilk said in z index not working for dynamic elements:

z: mouseArea.drag.active ? 1 : 0

I found solution. Change z-index for parent element similar as recommend you "z: mouseArea.drag.active ? 1 : 0"

J.Hilk

@exru
this should work:

Rectangle{
                        id: tg
                        x: -width
                        y: height / 2
                        z: mouseArea.drag.active ? 1 : 0
                        width: 20
                        height: 20
                        radius: 100

                        color: mouseArea.drag.active ? "green" : "red"
                        Drag.active: mouseArea.drag.active

                        MouseArea{
                            id: mouseArea
                            anchors.fill: parent
                            drag.target: parent
                        }

                    }

make sure to remove the explicit z value during createObject, I'm pretty sure, that breaks the binding of z: mouseArea.drag.active ? 1 : 0

exru

@J-Hilk said in z index not working for dynamic elements:

z: mouseArea.drag.active ? 1 : 0

Not working.

J.Hilk

@exru Not enough information.

exru

@J-Hilk said in z index not working for dynamic elements:

z: mouseArea.drag.active ? 1 : 0

I found solution. Change z-index for parent element similar as recommend you "z: mouseArea.drag.active ? 1 : 0"