Gridster 没有在我想要的地方添加小部件

Question

我有以下代码，当我将小部件正确添加到 (1,1) 时可以正常工作，但是当我将 (row, col) 用作 (2,2) 时，它会将小部件添加到 (1,2)。我做错了什么？

gridster = $(".gridster ul").gridster({widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');

gridster.add_widget('<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>', 1, 1, docItem.col, docItem.row);

结果HTML如下...

<div class="gridster ready">
    <ul id="gridData" style="width: 260px; position: relative; height: 50px;">
        <li data-col="1" data-row="1" data-sizex="1" data-sizey="1" class="gs-w" style="display: list-item;"><div>Total</div><div>1</div></li>
        <li data-col="2" data-row="1" data-sizex="1" data-sizey="1" class="gs-w" style="display: list-item;"><div>John</div><div>2</div></li>
    </ul>
</div>

我想检查一下 gridster 是否可以在任何我想要的地方添加小部件，而不是以线性增量模式。

编辑：正常运行，根据要求完成以下示例。

client/myCell.js

Template.cellular.created= function() {
Session.set('idxX',0);
Session.set('idxY',0);
Session.set('gridInit', 0);
currentFileId = "someId";
console.log("Setting file id");

Meteor.call('setFileId', currentFileId, function() {
    console.log("published");
    if(Session.get('gridInit') == 0) {
        gridster = $(".gridster ul").gridster({widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');
        Session.set('gridInit',1);
    }
    Meteor.subscribe("myCells"+currentFileId, function() {
                    cells = cellItems.find({owner: 1, myFileId: currentFileId}).fetch();
                    console.log(cells);

                    cells.forEach(function(docItem, idx){

                        console.log("inserting = " +idx + " item.row = "+docItem.row + " item.col = " + docItem.col);
                        //Blaze.renderWithData(Template.cells, docItem, $('#data').get(0));
                        gridster.add_widget('<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>', 1, 1, docItem.col, docItem.row);
                });
            });
});
};

Template.cellular.events({
'keydown .newCellDesc': function (e, t) {
  if (event.keyCode == 13 || event.keyCode == 9) {
      $('.newCellFormula').focus();
      event.stopPropagation();
      return false;
  }
},
'keydown .newCellVal': function (e, t) {
      if (event.keyCode == 13 || event.keyCode == 9) {
          $('.newCellDesc').focus();
          event.stopPropagation();
          return false;
      }
},
'keydown .newCellFormula': function (e, t) {
      if (event.keyCode == 13 || event.keyCode == 9) {
          $('.newCellVal').focus();
          event.stopPropagation();
          return false;
      }
},
'click #newCellUse': function (e, t) {

    $('#gridData').empty();

    if(Session.get('gridInit') == 0) {
        gridster = $(".gridster ul").gridster({autogenerate_stylesheet: true, widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');
        Session.set('gridInit',1);
    }

    Session.set('idxX', Session.get('idxX') + 1);
    Session.set('idxY', Session.get('idxY') + 1);
    var idxX = Session.get('idxX');
    var idxY = Session.get('idxY');
    console.log("Adding new cell to cell list ");

    if($('.newCellDesc').text().trim() != '' && $('.newCellVal').text().trim() != '' && $('.newCellFormula').text().trim() != '') {

        Meteor.call('insertCell', "someId", {owner: 1, myFileId: currentFileId, description: $('.newCellDesc').text().trim(), vals: $('.newCellVal').text().trim(), formula: $('.newCellFormula').text().trim(), col: idxX, row: idxY}, function() {

            console.log("updating gridster with data");
            Meteor.subscribe("myCells"+currentFileId, function() {
                    cells = cellItems.find({owner: 1, myFileId: currentFileId}).fetch();        
                    console.log(cells);

                    cells.forEach(function(docItem, idx){

                        console.log("inserting = " +idx + " item.row = "+docItem.row + " item.col = " + docItem.col);
                        //Blaze.renderWithData(Template.cells, docItem, $('#data').get(0));
                        el = '<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>'
                        gridster.add_widget(el, 1, 1, docItem.col, docItem.row);
                });
            });
        });
    }
    event.stopPropagation();
    return false;
}
});

client/myCell.css

.container { width: auto; }

client/newCell.css

#newCell
{
    width:400px;
    height: 40px;
    background-color: white;
    border: transparent;
}

.newCellDesc 
{
    width:30%;
    height: 40px;
    background-color: white;
    border: 0.5px solid black;
    float: left;
}

.newCellVal 
{
    width:25%;
    height: 40px;
    background-color: white;
    border:  0.5px solid black;
    float: left;
}

.newCellFormula 
{
    width:30%;
    height: 40px;
    background-color: white;
    border: 0.5px solid black;
    float: left;
}

client/myCell.html

<body>{{> cellular}}</body>

<template name="cellular">
<div id='cellPane'>
    <div id='newCell'>
        <div class='newCellDesc' contenteditable="true" display="block" placeholder="Description">
        </div>
        <div class='newCellFormula' contenteditable="true" display="block" placeholder="Formula">
        </div>
        <div class='newCellVal' contenteditable="true" display="block" placeholder="Value">
        </div>
        <button id='newCellUse' class="btn-sm btn-primary" type="submit">Add</button>
    </div>
    <div id='data' class='container-fluid'>
        <div class="gridster">
            <ul id="gridData">
            </ul>
        </div>
    </div>
</div>
</template>

server/cell.js

var fileId;
cellItems.allow({
    'insert': function (userId,doc) {
     return true; 
    },
    'update': function (userId,doc) {
      return true; 
    }
});

Meteor.methods({
    setFileId: function (theId) {
        console.log(theId);
        fileId = theId;
        Meteor.publish('myCells'+fileId, function(){
            console.log("using "+fileId + " to publish");
            return cellItems.find({owner: 1, myFileId: fileId});
        });
    },
    insertCell: function (fileId,item) {
        console.log(item);
        cellItems.insert(item);
        console.log(cellItems.find({owner: 1, myFileId: fileId}).fetch());
        return true;
    }
});

lib/collection.js

items = new Mongo.Collection("folders");

cellItems = new Mongo.Collection("cells");

currentFileId = null;
myId = null;

Answer 1

这是一个 much-requested feature for Gridster, but good news, there's a fix for it 可用的分支。

旧的 ducksboard repo of Gridster has been dormant for over a year, but other maintainers have stepped in to merge recent contributions. I highly recommend the dsmorse fork of Gridster，并已在我自己的项目中使用它（并对其进行了微小的修复，与此问题无关）。

这是 dsmorse 分支的 main demo & download page。

在其他功能改进中，此分支有一个选项 shift_widgets_up: false 可防止小部件吸附到网格中最上方的可用位置。稍微玩一下 the demo，看起来它可能不是完全没有错误，但这是我所知道的最接近你所问的事情。

Gridster 没有在我想要的地方添加小部件

Gridster not adding widgets where I want

javascript

meteor

gridster