How do I drag and drop elements inside a Flickable while maintaining the functionality of Flickable?

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

So, I added MouseArea and set an appropriate drag target. The squares can now be dragged! However, the squares seem to steal mouse events from Flickable. So the only way to scroll Flickable is to drag the mouse cursor over the gaps between the squares (very difficult!)

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 greatly appreciated. Thank!