How to make two areas that can drag and drop elements from one to the other?

JackRackham

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,

raven-worx

@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?

JackRackham

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,