[Solved] Can I stop draggable items in a Flickable from stealing Flickable mouse events?

[eLim]

Currently I have a Flickable with a Grid in it. The Grid holds a bunch of squares. The Flickable works great here. I can scroll up and down and look at all my squares. But now I want to be able to drag the squares inside of my Flickable.

So I've added a MouseArea and set the appropriate drag target. Now the squares can be dragged! However the squares seem to steal the mouse events from the Flickable. So the only way to scroll the Flickable is to drag the mouse cursor on the spaces between the squares (very hard!)

Here is my code:

Flickable {
    id: flickable
    contentHeight: grid.height
    anchors.fill: parent

    Grid {
        id: grid
        width: parent.width
        spacing: 2

        Repeater {
            id: repeater
            model: 40
            delegate: tile
        }
    }
}

Component {
   id: tile

   Rectangle {
       id: rect
       width: 128
       height: 128
       color: "black"

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

Any help is much appreciated. Thanks!

[p3c0]

@eLim Make use of pressDelay. In this way the events to its child are delivered after the said time. For eg:

pressDelay: 1000 //events delivered after 1 sec

Thus normal flicking also works as well as mouse dragging too.

[eLim]

@p3c0 Thank you very much. This works just fine!

[p3c0]

@eLim You're Welcome :)