How to have draggable items inside of a Flickable while maintaining Flickable functionality?

Question

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!

Answer 1

Thanks to this post I was alerted of the Flickable's pressDelay property. This has since solved my issues!