Solved DropArea overlapping
-
Hello,
I have items that can be dropped only to a small DropArea (called AcceptDropZone). This works fine.
Now I want the following behavior : if items are dropped elsewhere, they go back to their starting position when the user releases the mouse. To do this, I have added another DropArea (called RejectDropZone) in the background, that fills the entire window of the application.The problem is that RejectDropZone consumes the onDropped event even when the items are dropped over AcceptDropZone. As RejectDropZone is in the background of the QML stack, I was expecting AcceptDropZone to get the event first, as for MouseArea components.
Is this a bug or a valid behaviour of overlapping DropAreas? How can I get the result I am looking for?
Thanks for your help;
Regards
-
Hello,
I tried to have one of my DropArea as a child of the other, to be able to filter the events, but I still have the same issue.
Can anyone helps me with some clue?Thanks,
Regards
-
Now I want the following behavior : if items are dropped elsewhere, they go back to their starting position when the user releases the mouse. To do this, I have added another DropArea (called RejectDropZone) in the background, that fills the entire window of the application.
This can be done without adding another DropArea. The trick here is to check whether the drop is accepted or ignored. Try the following example:
import QtQuick 2.6 Item { width: 400; height: 400 Rectangle { x: 75; y: 75 width: 100; height: 100 color: "lightgray" Text { anchors.centerIn: parent text: "Drop here" } DropArea { anchors.fill: parent onDropped: drop.accept() } } Rectangle { id: rect x: 10; y: 30 width: 20; height: 20 color: "red" Drag.active: dragArea.drag.active Drag.hotSpot.x: 10 Drag.hotSpot.y: 10 MouseArea { id: dragArea anchors.fill: parent drag.target: parent onReleased: if (rect.Drag.drop() !== Qt.IgnoreAction) { console.log("Accepted."); } else { console.log("Rejected. Shifting to original place."); rect.x = 10 rect.y = 30 } } } }
Try dragging and dropping the red
Rectangle
. -
Hello,
Thanks for your code example, I'll give it a try this afternoon.
I see that you are not using the keys property of the DropArea.
As I am using it, do I have to fear any conflict with the way you are accepting or not the drop?Regards
-
I dont think so. It is used for filtering the events. So depending upon it you can decide whether to accept or reject the drop.
-
Hello,
I tried to add some filtering on the DropArea and it works well as soon as you set filters for every item with drag behavior.
Here is the code, based on yours:Item { width: 400; height: 400 Rectangle { x: 75; y: 75 width: 100; height: 100 color: "lightgray" Text { anchors.centerIn: parent text: "Drop here" } DropArea { anchors.fill: parent onDropped: drop.accept() keys: ["pin"] } } Rectangle { id: rect x: 10; y: 30 width: 20; height: 20 color: "red" Drag.active: dragArea.drag.active Drag.hotSpot.x: 10 Drag.hotSpot.y: 10 Drag.keys: ["pin"] MouseArea { id: dragArea anchors.fill: parent drag.target: parent onReleased: if (rect.Drag.drop() !== Qt.IgnoreAction) { console.log("Accepted."); } else { console.log("Rejected. Shifting to original place."); rect.x = 10 rect.y = 30 } } } Rectangle { id: rect2 x: 10; y: 90 width: 20; height: 20 color: "green" Drag.active: dragArea2.drag.active Drag.hotSpot.x: 10 Drag.hotSpot.y: 10 Drag.keys: ["pong"] MouseArea { id: dragArea2 anchors.fill: parent drag.target: parent onReleased: if (rect2.Drag.drop() !== Qt.IgnoreAction) { console.log("Accepted."); } else { console.log("Rejected. Shifting to original place."); rect2.x = 10 rect2.y = 90 } } } }
Green rect can't be dropped IF it has its key property set, otherwise it gets accepted by the DropArea.
All I have to do now is use this mechanism in my app.
Thanks for your help!Regards