QML: Drag items get clipped when dragged outside of a ScrollView

Question

I have a ScrollView which contains several draggable rectangles.

When I drag an item outside of that ScrollView, I want it to remain visible, but it gets clipped at the edge of the ScrollView.

I tried playing around with the z values, but it has absolutely no effect. Any idea on what else I could try?

Maybe parent it to something outside the scroll view? – dtech Apr 05 '18 at 15:11 — dtech, Apr 05 '18 at 15:11

score 1 · Accepted Answer · answered Apr 06 '18 at 01:45

You need to change the rectangles' parent to the parent of ScrollView when the rectangle been dragged.

And if you want the rectangle always stay out of ScrollView after drag, assign a new state after the mouse release instead of when: dragMe.drag.active.

Item{
    id: root
    width: 500
    height: 500
    ScrollView {
        width: 200
        height: 200

        Item{
            width: 500
            height: 500

            Rectangle{
                id: rect
                color: "red"
                width: 50
                height: 50
                MouseArea{
                    id: dragMe
                    drag.target: parent
                    anchors.fill: parent
                }
                states: State {
                    when: dragMe.drag.active
                    ParentChange { target: rect; parent: root }
                }
            }
        }
    }
}

QML: Drag items get clipped when dragged outside of a ScrollView

1 Answers1