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.0Rectangle {
width: 800
height: 800
id: rootDropArea { 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.0Rectangle {
width: 800
height: 800
id: rootDropArea { 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: 800DropArea {
id: dragTarget1
property alias dropProxy: dragTarget1width: 200; height: 200
y: 100; x: 100Rectangle {
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: 100Rectangle {
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: parentonReleased: { 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 } } ] }
}
}
}@