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


  • Moderators

    @bguivarch

    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


  • Moderators

    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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.