Drag and dropping identical QML components on top of each other

[Nihilish]

Hi,

I have a repeater that generates a bunch of rectangles. I want to be able to drag these rectangles around and generate an event when I drop one rectangle on another (think files and folders on an OS. I can drag folders & files, but I can drop a file on a folder and it stores it inside). I've tried the following but the dropArea gets confused because the object itself is draggable. OnDropped just never triggers. Is this possible?

Repeater {
            model: 5
            Item {
                id: element

                Item {
                    id: surfaceContainer

                    width: 150
                    height: 150
                    x: index * width

                    DropArea {
                        id: dropArea

                        anchors.fill: surfaceContainer

                        onContainsDragChanged: {
                            if (containsDrag && drag.source != draggableRectangle)
                                console.log("CHANGED")
                        }

                        onEntered: {
                            if (drag.source != draggableRectangle)
                                console.log("ENTERED")
                        }

                        onDropped: {
                            console.log("DROPPED")
                        }

                        onExited: {
                            if (drag.source != draggableRectangle && containsDrag)
                                drag.source.color = "yellow"
                        }
                    }

                    Rectangle {
                        id: draggableRectangle

                        x: width / 2

                        color: "blue"
                        height: 100
                        width: 100

                        Drag.active: dragArea.drag.active

                        MouseArea {
                            id: dragArea

                            anchors.fill: draggableRectangle
                            drag.target: draggableRectangle

                            onDoubleClicked: {
                                connectionId.visible = !connectionId.visible
                            }
                        }
                    }
                }
            }
        }