我有以下代码，当我正确地将小部件添加到（1,1）时，但当我使用（行，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是否可以在我想要的地方添加一个小部件而不是线性增量模式。
编辑：按要求在下面运行完整示例。
的客户机/ 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;
}
});
的客户机/ myCell.css
.container { width: auto; }
的客户机/ 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;
}
的客户机/ 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>
服务器/ 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;
答案 0 :(得分：1)
这是Gridster的much-requested功能，但好消息是，叉子中有a fix for it。
Gridster的旧ducksboard repo已经休眠了一年多，但其他维护者已经介入合并最近的贡献。 我强烈推荐the dsmorse fork of Gridster ，并在我自己的项目中使用它（并提供了一个小问题，与此问题无关）。
这是dsmorse fork的main demo & download page。
在其他功能改进中，此fork有一个选项shift_widgets_up: false，可防止小部件捕捉到网格中最上面的可用位置。使用the demo这一点，它看起来可能不完全没有错误，但它是我所知道的最接近你要问的内容。