Problem with drag and drop in qtquick 2

matteli

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

chatmoa

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
   }
  }
 ]
}

}
}
}@