Drag and Drop on Grid with variable size

  • Hello everyone,

    I'm trying to do something like a Layout Builder for a game (Last day on earth) on Android with QML.
    I want to do pretty much the same as Clash on Clans Builder.

    • A grid where I can drop buildings on it
    • A List below with several building (each building has a name, count, image, size)
    • When I want to move a building with a 1x1 tile it's ok, but I can not figure out how to Drag on Drop with a size of 2x2 or 3x3

    I based my project on the Drag and Drop Example from Qt Doc. But I changed the Grid by a GridLayout and tried to fix my problem with coumnSpan and rowSpan for my different building sizes.

    I have my ListModel with all my data.

    ListModel {id: _model}
    function addBuilding(model, name, count, size, urlImg)
        model.append({"name":name, "count":count, "size":size, "urlImg":urlImg})
    Component.onCompleted: {
            addBuilding(_model, qsTr("Building1")  , 99  , 1 , "")
            addBuilding(_model, qsTr("Building2")  , 2   , 1 , "")

    My GridLayout has a Repeater with a DropArea inside.

    GridLayout {
                id: grid
                rowSpacing: 1
                columnSpacing: 1
                Layout.fillWidth: true
                Layout.fillHeight: true
                columns: 20
                rows: 20
                Repeater {
                    model: 20*20;
                    delegate: DropTile { } // File in the Qt Example

    My list of Building is a Listview with a Column, inside a Repeater and inside my ListModel

    ListView {
                id: dragSource
                Layout.fillWidth: true
                height: 50
                orientation: ListView.Horizontal
                spacing: 2
                model: _model
                delegate: Column {
                    id: column
                    //need _index for the _model.get() function DragTile in Repeater
                    property int _index: index
                    // tileSize = 30, spacing negative to have all the column on the same surface
                    spacing: -tileSize * _model.get(index).size 
                    Repeater {
                        model: _model.get(_index).count
                        DragTile { } // See Qt Example

    I do not know what to use for my different size of buildings :(.
    Maybe I will take a shot with a web application but I'm a beginner in php/html.

    Do you have idea to manage different size of Drag / Drop on a Grid ?

    Thanks a lot !


Log in to reply

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