Dynamic addition of component inside a grid (by click Button) and swap elements capability

JorisC · wrote on 18 Oct 2021, 11:20

Dear Qt/QML community

In my app I have a button when I click it it creates an existing component (defined in zone.qml file).
I would like to add this new component into a grid zone. The Final goal is when user drags "zone" element inside the grid he can swap position in order to reorganize itself the elements position

Zone.qml:

//zone.qml

Item{
    id: zone

    MouseArea{
        ... //(I make it draggable)
    }
    Rectangle{
        width: parent.width
        height: parent.height
        anchors.fill: parent.fill

        ChartView{
             ...
        }
       ListView{
           ...
        }
    }
}

I my main.qml I tried with a GridLayout. It works for my grid display objective ! (here below the code for whose are interested:

  //  Button{
  //      width: 200
  //      height: 50
  //      text:"Click Me"
  //      y:400
  //      x:2350
   //     onClicked: {
   //         Qt.createComponent("Zone.qml").createObject(splitView, {"width":scrollView.largeur/2,"height":scrollView.height/2.5});
   //     }
 //   }

    //    ScrollView{
    //        property alias largeur:scrollView.width
    //        property int largeur:scrollView.height
    //        id:scrollView
    //        width: Screen.width
    //        height: 0.75*Screen.height
    //        anchors.left: parent.left
    //        anchors.top: parent.top
    //        anchors.leftMargin: 0.05*parent.width
    //        anchors.topMargin: 0.05*parent.height
    //        clip: true

    //        GridLayout{
    //            id: splitView
    //            width: parent.width
    //            height:parent.heigh
    //            columns: 2
    //            rows:1
    //            clip: true
    //        }

    //    }

But I didn't manage to swap position. It's ok to drag element inside the grid (as they have a mouse Area which allow drag) but the drag is free and doesn't fit with a gridposition and I don't know how to implement a drag mechanism.
On another side, I wonder if gridView could be more adapted for that but my actual problem is that with gridView I can't add element in a grid organization ...

Here my code with gridview attempt:

Button{
        width: 200
        height: 50
        text:"Click Me"
        y:400
        x:2350
        onClicked: {
            //var object= Qt.createComponent("Zone.qml").createObject(parent, {"x":500,"y":500,"width":200,"height":200, "id_zone":1});
            gridmodel.append(object));
        }
    }

GridView{
        x:100
        y:100
        id:gridView
        width:0.5*Screen.width
        height:Screen.height
        cellWidth: 0.5*width
        cellHeight: 0.5*height
        layoutDirection: Qt.LeftToRight
        model:ListModel{
            id:gridmodel
        }
        delegate: Grid{
            width: parent.width
            height: parent.height
            columns: 3

        }

It doesn't work ...
Can someone help me please, I spend a lot of time on it and I guess there is (are) some thing(s) I miss !
Thanks a lots in advance

Jo