Drag Item from list clipping problem and drag and drop inside ScrollView

[Schneidi]

Hello guys I need some help with Drag 'n' Drop in qml.
I have a ScrollView which hold a grid of users an assigned packages.
I have to implement drag and drop functionality so that packages can be drag from one user to another.
This is basically not the problem but I'm struggeling with the request Rectangle in the example below and
the behavior the the ScrollView in combination with the MouseAreas.

At first the request object. If I drag an packageItem the request Rectangle is used to visualize the drag.
But the request Rectangle is always rendered behind every packageItem which was build after the currently draged packageItem. I experienced this in several examples. Even in the Qt Quick draganddrop example.

Imagine a List of three Items. I drag the first Item and it will be displayed behind the second and the third Item.
If I drag the second Item it will be displayed in front of the first Item but behind the third item and if I drag the third Item it will be displayed in front of the first and the second Item. I hope you understand what I'm trying to explain.

What can I do to render the request Rectangles infront of every packageItem ?
I tried to set the z property but this has absolutely no effect.

The second problem is that I use a ScrollView a container for the package lists so i can scroll through the lists.
But if i have the mouseAreas for the drag and drop handling in the lists i can't flick the scrollView anymore.

What can I do to implement the drag and drop inside the ScrollView without interfering with the scrolling of the view ?

I Hope you guys can help me with this problems.
Thanks you

Here is the code:
https://gist.github.com/anonymous/11174995

[th.thielemann]

My solution for two scrollview items and drag and drop:

1. Start with a simple list and implement the drag and drop
2. Duplicate the lists: Drag and drop between the lists should be possible. My list views are called listViewSource and listViewTarget
3. Within both lists add to your mouse area and handling for the z property. The source item shall have a higher z than the target item

<code>
ListView {
id: listViewSource
...
delegate: Rectangle {
id: dragRectSource
...
MouseArea {
id: mouseAreaSource
anchors.fill: parent
drag.target: dragRectSource

                    drag.onActiveChanged: {
                        if (mouseAreaSource.drag.active) {
                            listViewSource.dragItemIndex = index;  // dragItemIndex is a custom property of ListView to store the current index
                            scrollViewSource.z = scrollViewTarget.z + 1
                        }
                        else {
                            scrollViewSource.z = 0
                        }

                        dragRectSource.Drag.drop();
                        scrollViewSource.viewport.clip = ! mouseAreaSource.drag.active
                        scrollViewTarget.viewport.clip = ! mouseAreaSource.drag.active
                    }
                }

<code>

4. Surround both ListView items with ScrollView items (scrollViewSource, scrollViewTarget). Drag and drop should be possible, but the drag item is clipped.
5. Add the following to drag.onActiveChanged
   scrollViewSource.viewport.clip = ! mouseAreaSource.drag.active
6. While clipping is disabled add some overlays on top of ScrollView