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,


  • Moderators

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


Log in to reply
 

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