Qml - How to stop a rectangle dragging outside it's parent - qt

Question

I am using qml to create a resizable rectangle that can be dragged inside it's parent pane, but cannot be dragged outside (Fig. 1). When I resize it e.g. using the top left handle, it works great and can't be resized outside it's parent (Fig. 2). But when I drag the entire rectangle, it can be dragged outside its parent (Fig. 3). My code attempts to use the same logic for both, i.e. once the rectangle's left side reaches it's parent's left side, it cancels the drag. Works fine for resizing, but doesn't when I drag the rectangle. What am I doing wrong?
Pane {
id: compPane
implicitHeight: imageListModel.reqViewHeight
implicitWidth: imageListModel.reqViewWidth
leftPadding: 0
topPadding: 0
clip: true
background: Rectangle{
id: backgroundRect
anchors.fill: parent
color: "gray"
border.color: "black"
border.width: 6
}
// Resizable rectangle that can be dragged
Rectangle {
id: indRect
x:parent.width / 4
y: parent.height / 4
width: parent.width / 2
height: parent.width / 2
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
MouseArea {
id: indImagesDragArea
anchors.fill: parent
anchors.margins: 8
drag.target: parent
onPositionChanged: {
if (drag.active){
if (indRect.x <= 0 + backgroundRect.border.width)
Drag.cancel()
if (indRect.x + indRect.width >= (compPane.width - backgroundRect.border.width) )
Drag.cancel()
}
}
}
// Top Left handle - works well
Rectangle {
width: 15
height: 15
color: "steelblue"
anchors.verticalCenter:parent.top
anchors.horizontalCenter: parent.left
MouseArea {
anchors.fill: parent
cursorShape: Qt.SizeFDiagCursor
drag{ target: parent; axis: Drag.XAndYAxis }
onPositionChanged: {
if(drag.active){
//var delta = Math.max(mouseX, mouseY)
var newWidth = indRect.width - mouseX
var newHeight = indRect.height - mouseY;
if (newWidth < width || newHeight < height)
return
if (indRect.x <= 0 + backgroundRect.border.width && mouseX < 0){
Drag.cancel()
indRect.x = 0 + backgroundRect.border.width
}
else {
indRect.width = newWidth
indRect.x = indRect.x + mouseX
}
if (indRect.y <= 0 + backgroundRect.border.width && mouseY < 0){
Drag.cancel()
indRect.y = 0 + backgroundRect.border.width
}
else{
indRect.height = newHeight
indRect.y = indRect.y + mouseY
}
}
}
}
}
}
}

Answer 1

Drag.cancel() is actually intended for use when implementing drag and drop types of interactions. In this case, the calls to it are doing nothing because you are never actually starting one of those sequences. Your upper left handle example works fine if you comment out the calls to Drag.cancel().
Why your upper left example is working is because you are limiting the x and y on position updates to clip them to the scene via explicit updates of indRect.x and indRect.y. You just need to implement the same technique for the main drag scenario.
For instance:
onPositionChanged: {
if (drag.active){
if (indRect.x <= 0 + backgroundRect.border.width)
indRect.x = 0 + backgroundRect.border.width;
if (indRect.x + indRect.width >= (compPane.width - backgroundRect.border.width) )
indRect.x = compPane.width - backgroundRect.border.width - indRect.width;
}
}

Answer 2

You could try to use the property of drag.minimum and drag.maximum.
See the documentation:
https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#drag.threshold-prop