Unsolved How to make two areas that can drag and drop elements from one to the other?
-
I am developing a GUI and would need to have two different areas (on left and right of a central item) that hold elements. These elements can in turn be dragged and droppped between both areas. I followed the Tiles example but I have a problem with the first area, because it cannot drop elements on the second area (maybe because it is defined later in the code?)
This is a snippet of my code:
//your code here Rectangle{ id : areaLeft anchors.right: rectangleLeft.right anchors.top : parent.top anchors.bottom: parent.bottom anchors.topMargin : margin anchors.bottomMargin: margin color: "#600c00" width: 380 height: 400 DropArea { id : dropAreaLeft anchors.fill: parent onEntered: drag.source.caught = true; onExited: drag.source.caught = false; } GridView { id : textGrid1 anchors.top: parent.top anchors.bottom: parent.bottom anchors.topMargin: 50 anchors.bottomMargin: 50 //anchors.centerIn: parent model : myModel visible : true //cellWidth: 80; cellHeight: 80+ Drag.active: iconMouse3.drag.active z: iconMouse3.drag.active || iconMouse3.pressed ? 2 : 0 delegate: Rectangle { id: iconElem3 //anchors.centerIn: textGrid1 height: 90 width: 90 color: "#600c00" //model.modelData.color property Item dragParent /* Text { text: name; font.pixelSize: 20; textFormat: Text.RichText; }*/ Image{ source: icon; } MouseArea{ id: iconMouse3 anchors.fill: parent drag.target: parent onClicked: { elem.onClick( name ); } } Drag.hotSpot.x: 32 Drag.hotSpot.y: 32 states: State { when: iconMouse3.drag.active ParentChange { target: areaRight.textGrid2; parent: dragContainer } AnchorChanges { target: areaRight.textGrid2; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined } } } } }
The second area is defined in the same way, only would use textGrid1 as drop area.... Anyone has an idea how I could resolve this?
Best regards,
-
@JackRackham said in How to make two areas that can drag and drop elements from one to the other?:
I followed the Tiles example but I have a problem with the first area, because it cannot drop elements on the second area (maybe because it is defined later in the code?)
whats the error/misbehavior you get?
-
Actually I get no error. The problem is, that I can drag elements from the second area to the first one, but not the other way around.
The complete definition of both areas follows (both are the same in principle):
//your code here Rectangle{ id : areaLeft anchors.right: rectangleLeft.right anchors.top : parent.top anchors.bottom: parent.bottom anchors.topMargin : margin anchors.bottomMargin: margin color: "#600c00" width: 380 height: 400 DropArea { id : dropAreaLeft anchors.fill: parent onEntered: drag.source.caught = true; onExited: drag.source.caught = false; } GridView { id : textGrid1 anchors.top: parent.top anchors.bottom: parent.bottom anchors.topMargin: 50 anchors.bottomMargin: 50 //anchors.centerIn: parent model : myModel visible : true //cellWidth: 80; cellHeight: 80+ Drag.active: iconMouse3.drag.active z: iconMouse3.drag.active || iconMouse3.pressed ? 2 : 0 delegate: Rectangle { id: iconElem3 //anchors.centerIn: textGrid1 height: 90 width: 90 color: "#600c00" //model.modelData.color property Item dragParent /* Text { text: name; font.pixelSize: 20; textFormat: Text.RichText; }*/ Image{ source: icon; } MouseArea{ id: iconMouse3 anchors.fill: parent drag.target: parent onClicked: { elem.onClick( name ); } } Drag.hotSpot.x: 32 Drag.hotSpot.y: 32 states: State { when: iconMouse3.drag.active ParentChange { target: areaRight.textGrid2; parent: dragContainer } AnchorChanges { target: areaRight.textGrid2; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined } } } } }
and
//your code here Rectangle{ id : areaRight anchors.right: rectangleLeft.right anchors.top : parent.top anchors.bottom: parent.bottom anchors.topMargin : margin anchors.bottomMargin: margin color: "#600c00" width: 380 height: 400 DropArea { id : dropAreaRight anchors.fill: parent onEntered: drag.source.caught = true; onExited: drag.source.caught = false; } GridView { id : textGrid2 anchors.top: parent.top anchors.bottom: parent.bottom anchors.topMargin: 50 anchors.bottomMargin: 50 //anchors.centerIn: parent model : myModel visible : true //cellWidth: 80; cellHeight: 80+ Drag.active: iconMouse4.drag.active z: iconMouse4.drag.active || iconMouse4.pressed ? 2 : 0 delegate: Rectangle { id: iconElem4 //anchors.centerIn: textGrid1 height: 90 width: 90 color: "#600c00" //model.modelData.color property Item dragParent /* Text { text: name; font.pixelSize: 20; textFormat: Text.RichText; }*/ Image{ source: icon; } MouseArea{ id: iconMouse4 anchors.fill: parent drag.target: parent onClicked: { elem.onClick( name ); } } Drag.hotSpot.x: 32 Drag.hotSpot.y: 32 states: State { when: iconMouse3.drag.active ParentChange { target: areaRight.textGrid1; parent: dragContainer } AnchorChanges { target: areaRight.textGrid1; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined } } } } }
I would like to move objects from areaLeft to areaRight and viceversa, but it only works from areaRight to areaLeft.... Does it have anything to do with the order elements are defined? If so, how could I override it?
Thanks,