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

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

javascript meteor

Javascript Gridster没有在我想要的地方添加小部件,javascript,meteor,gridster,Javascript,Meteor,Gridster,我有下面的代码，当我正确地将小部件添加到（1,1）中时可以使用，但当我将（行，列）用作（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_overl

我有下面的代码，当我正确地将小部件添加到（1,1）中时可以使用，但当我将（行，列）用作（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);

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>

lib/collection.js

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

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

currentFileId = null;
myId = null;

这是Gridster的一个特性，但好消息是，fork中有可用的功能

Gridster的老版本已经休眠了一年多，但其他维护者已经介入合并最近的贡献我强烈推荐，并在我自己的项目中使用了它（并对其进行了一个小的修复，与此问题无关）

这是dsmorse叉子的价格

在其他功能改进中，这个fork有一个选项

shift\u widgets\u up:false

，可以防止widgets捕捉到网格中最上面的可用位置。稍微考虑一下，它看起来可能不是完全没有bug的，但它是我所知道的最接近您要求的东西。

gridster看起来是一个不错的插件。如果你创建了一个，我来看看。有流星包吗？我需要它和meteor一起工作。据我所知不是这样，但你能吗？非常感谢！我能够使它成为本地包并添加它，但在运行meteor时抛出错误。你能帮忙吗<代码>W20151019-18:47:04.928（-4）？（STDERR）TypeError:无法读取未定义的属性“fn”

W20151019-18:47:04.928（-4）？（STDERR）在jquery.gridster.js:118:6我自己从来没有使用过meteor，但是这个错误建议您应该查看jquery.gridster.js的第118行，看看应该在哪个变量上找到fn
。这只是一种预感，但是如果var是$
或jQuery，那么您需要在Gridster之前导入jQuery。谢谢分享。我已经为它创建了一个包，如果有任何问题，请告诉我
#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;
}

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

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;
    }
});

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

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

currentFileId = null;
myId = null;