Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Problem when stacking DropAreas



  • Hi,
    I have an Item with a DropArea which contains a child item with also a DropArea. When I drag something onto the child's DropArea, it is the parent's DropArea that receives drop events. Is there a way to workaround it. I am using Qt-5.5 alpha.

    Regards


  • Moderators

    Hi @dzimiwine
    Can you post an example which shows the problem ?



  • @p3c0 Thanks for your reply.
    This is a small code that shows the problem:

    main.qml:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 640
        height: 480
        visible: true
    
        Rectangle
        {
            x: 40
            y: 40
            width: 200
            height: 200
            color: parentDropArea.containsDrag ? "purple" : "red"
    
            DropArea {
                id: parentDropArea
                anchors.fill: parent
            }
    
            Rectangle {
                x: 10
                y: 20
                color: childDropArea.containsDrag ? "purple" : "blue"
                width: 100
                height: 100
    
                DropArea {
                    id: childDropArea
                    anchors.fill: parent
                }
            }
        }
    
    
        Rectangle
        {
            id: draggableItem
            color: "green"
            x: 10
            y: 10
            width: 20
            height: 20
            Drag.active: mouseArea.drag.active
            MouseArea
            {        id: mouseArea
                anchors.fill: parent
                drag.target: parent
            }
        }
    }
    

  • Moderators

    @dzimiwine To make the events generate properly and propagate try putting Rectangle inside DropArea as follows:

    DropArea {
        x: 40
        y: 40
        width: 200
        height: 200
    
        Rectangle {
            anchors.fill: parent
            color: parent.containsDrag ? "purple" : "red"
        }
    
        DropArea {
            x: 10
            y: 20
            width: 100
            height: 100
    
            Rectangle {
                anchors.fill: parent
                color: parent.containsDrag ? "purple" : "blue"
            }
        }
    }
    

    In this way you do not need to reject any events that you would need in your earlier approach.



  • Thanks a lot. It works!! Is the problem because the child item is not a child of the parent's drop area?


  • Moderators

    @dzimiwine Yes I think. Or else you have to reject the events to allow them to propagate to other areas.



  • @p3c0 Ok. Thanks



  • @p3c0 Btw why it is not handled like mouse areas? Mouse events are properly propagated across them.


  • Moderators

    @dzimiwine No. Mouse events too wont. For a test try replacing DropArea with MouseArea and containsDrag with containsMouse in your original example.


Log in to reply