How to use DropArea ?



  • Forgive my poor English.

    I write two samples as following.

    Sample1:
    @import QtQuick 2.0

    Item {
    width: 200; height: 200

    DropArea {
        x: 75; y: 75
        width: 100; height: 100
    
        Rectangle {
            anchors.fill: parent
            color: "green"
        }
    
        onEntered: console.debug("onEntered")
        onExited: console.debug('onExited')
    
        DropArea {
            width: 50; height: 50
    
            Rectangle {
                anchors.fill: parent
                color: "blue"
            }
    
            onEntered: console.debug("onEntered 2")
            onExited: console.debug('onExited 2')
        }
    }
    
    Rectangle {
        x: 10; y: 10
        width: 20; height: 20
        color: "red"
    
        Drag.active: dragArea.drag.active
    
        MouseArea {
            id: dragArea
            anchors.fill: parent
    
            drag.target: parent
        }
    }
    

    }@

    Sample2:
    @import QtQuick 2.0

    Item {
    width: 200; height: 200

    Rectangle {
        x: 75; y: 75
        width: 100; height: 100
        color: "green"
    
        DropArea {
            anchors.fill: parent
    
            onEntered: console.debug("onEntered")
            onExited: console.debug('onExited')
    
        }
    
        Rectangle {
            width: 50; height: 50
            color: "blue"
    
            DropArea {
                anchors.fill: parent
    
                onEntered: console.debug("onEntered 2")
                onExited: console.debug('onExited 2')
            }
        }
    }
    
    Rectangle {
        x: 10; y: 10
        width: 20; height: 20
        color: "red"
    
        Drag.active: dragArea.drag.active
    
        MouseArea {
            id: dragArea
            anchors.fill: parent
    
            drag.target: parent
        }
    }
    

    }@

    You see. The two samples is similiar. But their outputs is different.
    You can do as following to test the two samples:

    1. Drag the 'red' rectangle to 'blue' rectangle.
    2. Then drag the 'red' rectangle to 'green' rectangle.
    3. Then drag the 'red' rectangle back to 'blue' rectangle.
    4. Finally drag the 'red' rectangle back to 'white' background.
      I use qmlscene to test the two samples in qt5.0.1.
      The sample1's output is:
      @onEntered

    onEntered 2

    onExited 2

    onEntered 2

    onExited 2

    onExited@

    The sample2's output is:
    @onEntered 2

    onExited 2

    onEntered

    onExited@

    So Where is the problem?



  • bq. So Where is the problem?

    That a good question, what is the problem? Why did you write here?



  • My questions are :
    1) Why the sample1’s output is different to sample2’s output ?
    2) How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?



  • Sorry for my poor English.

    I have to explain my question2 once more.

    1. How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?
      ----------- l only meant : What are the principles the qt quick follows to emit signals (like onEntered / onExited) of DropArea ?


  • I can write another sample as following.
    Sample3
    @import QtQuick 2.0

    Item {
    width: 500; height: 500

    Rectangle {
        id: rectGreen
        x: 50; y: 50
        width: 100; height: 100
        color: "green"
    
        DropArea {
            id: dropArea1
    
            anchors.fill: parent
    
            onEntered: console.debug("onEntered")
            onExited: console.debug('onExited')
        }
    }
    
    Rectangle {
        id: rectBlue
        x: 100; y: 50; z: 10
        width: 100; height: 100
        color: "blue"
        opacity: 0.5
    
        DropArea {
            id: dropArea2
    
            anchors.fill: parent
    
            onEntered: console.debug("onEntered 2")
            onExited: console.debug('onExited 2')
        }
    }
    
    Rectangle {
        id: rectDrag
    
        x: 10; y: 10; z:20
        width: 20; height: 20
        color: "red"
    
        Drag.active: dragArea.drag.active
    
        MouseArea {
            id: dragArea
            anchors.fill: parent
    
            drag.target: parent
        }
    }
    

    }@
    I do as following to test this sample:

    1. Drag 'rectDrag' to 'rectGreen'. --- console print: onEntered
    2. Then drag 'rectDrag' to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my third question.)
    3. Then drag 'rectDrag' to 'rectBlue'. --- console print: onExited onEntered 2
    4. Then drag 'rectDrag' back to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my fourth question.)
    5. Then drag 'rectDrag' to 'rectGreen'. --- console print: onExited 2 onEntered
    6. Finally drag 'rectDrag' back to 'white' background. --- console print: onExited
      I use qmlscene to test this samples in qt5.0.1. (os: windows 7)


  • Not sure why you are unclear about these, maybe you missed some basics of QML;

    • items lower in the file are placed at higher z-index (i.e. on top) of stuff that came before it.

    • an mouse area or drop area on top of another blocks events from the one below it.



  • Thank you for your reply, Thomas Zander.

    I know the basics of QML you mention.
    My problem is that the behavior of the samples I have described doesn't follow the 'basic 2' (an mouse area or drop area on top of another blocks events from the one below it.).

    Check the 'Sample3'. 'dropArea2' is on top of 'dropArea1'.
    When I do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.", the 'dropArea2' should block 'dropArea1' (console should print: onExited 2 onEntered) following the 'basic 2'. But it doesn't happen, so console prints nothing.
    Notice: you should do "1) Drag ‘rectDrag’ to ‘rectGreen’. —- console print: onEntered" first, then do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.".

    Similiarly, you can check the 'Sample1' and 'Sample2'.
    In 'Sample1', when I do "1) Drag the ‘red’ rectangle to ‘blue’ rectangle.", the console should print 'onEntered 2', but the console print 'onEntered onEntered 2'.
    The DropArea hierarchy in 'Sample1' is the same as DropArea hierarchy in 'Sample2'. But their behavior is different.



  • I am definitely seeing what you are seeing sanwangshan. It definitely appears that there are some peculiarities when rectangles intersect that have child DropAreas. I've been looking at your samples for about 15 minutes and still can't quite figure out how to characterize the behavior.



  • Yes, my question is like what stevenhurd said.




Log in to reply
 

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