Problem with drag and drop in qtquick 2



  • Hello,

    I tested a example to do somme drag and drop.
    Here is my code
    @
    import QtQuick 2.0

    Rectangle {
    width: 800
    height: 800
    id: root

     DropArea {
         id: dragTarget1
         width: 200; height: 200
         y: 100; x: 100
    
         onDropped: {
             drop.source.anchors.centerIn = dragTarget1
             console.log("dropped in 1")
         }
    
         Rectangle {
             id: target
             anchors.fill: parent
             color: "lightgreen"
         }
         states: [
             State {
                 when: dragTarget1.containsDrag
                 PropertyChanges {
                     target: target
                     color: "green"
                 }
             }
         ]
     }
    
     DropArea {
         id: dragTarget2
         width: 200; height: 200
         y: 400; x: 100
    
         onDropped: {
             drop.source.anchors.centerIn = dragTarget2
             console.log("dropped in 2")
         }
    
         Rectangle {
             id: target2
             anchors.fill: parent
             color: "lightgreen"
         }
         states: [
             State {
                 when: dragTarget2.containsDrag
                 PropertyChanges {
                     target: target2
                     color: "green"
                 }
             }
         ]
     }
    
    
    Rectangle {
    
        MouseArea {
            id: maDrag
            drag.target: parent
            onReleased: parent.Drag.drop()
            anchors.fill: parent
        }
    
        id: request
        color: "blue"
        width: 100; height: 100
        x: 600; y: 600
        anchors.centerIn: undefined
    
        Drag.active: maDrag.drag.active
        Drag.hotSpot.x: width/2
        Drag.hotSpot.y: height/2
    
        states: [
            State {
                when: maDrag.drag.active
                PropertyChanges {
                    target: request
                    opacity: 0.5
                }
                PropertyChanges {
                    target: request
                    anchors.centerIn: undefined
                }
            }
        ]
    }
    

    }

    @

    With this code there is no problem. When i drag my blue square in a dropaera 1, it is dropped in the center of the dropaera 1. When i drag the same from the first dropaera to the second, it is dropped in the center of the dropaera 2.

    Now i want to start with my blue square in the center of the dropaera 1. So i changed one line.
    @
    import QtQuick 2.0

    Rectangle {
    width: 800
    height: 800
    id: root

     DropArea {
         id: dragTarget1
         width: 200; height: 200
         y: 100; x: 100
    
         onDropped: {
             drop.source.anchors.centerIn = dragTarget1
             console.log("dropped in 1")
         }
    
         Rectangle {
             id: target
             anchors.fill: parent
             color: "lightgreen"
         }
         states: [
             State {
                 when: dragTarget1.containsDrag
                 PropertyChanges {
                     target: target
                     color: "green"
                 }
             }
         ]
     }
    
     DropArea {
         id: dragTarget2
         width: 200; height: 200
         y: 400; x: 100
    
         onDropped: {
             drop.source.anchors.centerIn = dragTarget2
             console.log("dropped in 2")
         }
    
         Rectangle {
             id: target2
             anchors.fill: parent
             color: "lightgreen"
         }
         states: [
             State {
                 when: dragTarget2.containsDrag
                 PropertyChanges {
                     target: target2
                     color: "green"
                 }
             }
         ]
     }
    
    
    Rectangle {
    
        MouseArea {
            id: maDrag
            drag.target: parent
            onReleased: parent.Drag.drop()
            anchors.fill: parent
        }
    
        id: request
        color: "blue"
        width: 100; height: 100
        x: 600; y: 600
        anchors.centerIn: dragTarget1  //LINE CHANGED HERE
    
        Drag.active: maDrag.drag.active
        Drag.hotSpot.x: width/2
        Drag.hotSpot.y: height/2
    
        states: [
            State {
                when: maDrag.drag.active
                PropertyChanges {
                    target: request
                    opacity: 0.5
                }
                PropertyChanges {
                    target: request
                    anchors.centerIn: undefined
                }
            }
        ]
    }
    

    }
    @

    And here, there is a probem. I can't drag my square to the dropaera 2. It's always return to the dropaera 1.
    Is someone can help me ?

    Thanks

    matteli



  • Here how I solve your problem...

    @import QtQuick 2.0
    Rectangle {
    id: rootTarget
    width: 800
    height: 800

    DropArea {
    id: dragTarget1
    property alias dropProxy: dragTarget1

    width: 200; height: 200
    y: 100; x: 100

    Rectangle {
    id: target
    anchors.fill: parent
    color: "lightgreen"
    }
    states: [
    State {
    when: dragTarget1.containsDrag
    PropertyChanges {
    target: target
    color: "green"
    }
    }
    ]
    }

    DropArea {
    id: dragTarget2
    width: 200; height: 200
    y: 400; x: 100

    Rectangle {
    id: target2
    anchors.fill: parent
    color: "lightgreen"
    }
    states: [
    State {
    when: dragTarget2.containsDrag
    PropertyChanges {
    target: target2
    color: "green"
    }
    }
    ]
    }

    Rectangle {
    id: debut
    width: 120; height: 120
    x: 600; y: 600
    color: "red"

    MouseArea {
    id: maDrag
    drag.target: carre
    width: 100; height: 100
    anchors.centerIn: parent

    onReleased: {
     console.log('onReleased')
     parent = carre.Drag.target !== null ? carre.Drag.target : debut
    }
    
    Rectangle {
     id: carre
     color: "blue"
     width: 100; height: 100
     anchors.verticalCenter: parent.verticalCenter
     anchors.horizontalCenter: parent.horizontalCenter
    
     Drag.active: maDrag.drag.active
     Drag.source: maDrag
     Drag.hotSpot.x: width/2
     Drag.hotSpot.y: height/2
    
     states: [
      State {
       when: maDrag.drag.active
       PropertyChanges {
        target: carre
        opacity: 0.5
       }
       ParentChange {
        target: carre
        parent: debut
       }
    
       AnchorChanges {
        target: carre;
        anchors.horizontalCenter: undefined;
        anchors.verticalCenter: undefined
       }
      }
     ]
    }
    

    }
    }
    }@


Log in to reply
 

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