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 !

    Panpan.


Log in to reply
 

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