Item {
    id: foo
    anchors.fill: parent

    Rectangle {
        id: rect
        width: 270; height: 270
        color: "transparent"
        anchors {
            top: parent.top
            topMargin: -Theme.paddingMedium
            horizontalCenter: parent.horizontalCenter
        }
        Drag.active: dragArea.drag.active

        Rectangle {
            width: 270; height: 270
            opacity: 0.5; radius: 90
            color: Theme.highlightDimmerColor
            anchors.centerIn: rect
        }

        MouseArea {
            id: dragArea
            anchors.fill: parent

            drag.target: rect
            drag.axis: Drag.XandYAxis
            drag.minimumX: 10
            drag.maximumX: 270
            drag.minimumY: -10
            drag.maximumY: 600

            //these numbers work in landscape
            //drag.minimumX: 10
            //drag.maximumX: 680
            //drag.minimumY: 10
            //drag.maximumY: 200

            onPressed: {
                rect.anchors.top = undefined
                rect.anchors.topMargin = undefined
                rect.anchors.horizontalCenter = undefined
            }
        }
    }
}