Gridster不动态移动小部件

我正在尝试使用Gridster.js在我的项目中执行一些拖放function。

我在我的小部件中使用了一堆div，其中包含表单和按钮，而不是使用无序列表。

我的问题是我的第一列无法拖动，我无法将我的小部件放在任何地方。 他们只是回到原来的位置

这是我的布局：

 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 ... ETC  

这是我的js，在doc准备好了

 var gridster = $('.gridster').gridster({ widget_margins: [5,5], widget_selector: '.dragMe', widget_base_dimensions: [264, 103], max_cols: 5, max_rows: 5, resize: { enable: true }, draggable: { start: function(event, ui) { dragged = 1; }, stop: function(event, ui){ var id = this.$helper[0].attributes[0].value; var row = this.$helper[0].attributes[1].value; var col = this.$helper[0].attributes[2].value; console.log(id, row, col); }, items: '.dragMe', limit: true } }).data('gridster'); 

我有grister.js和css文件。 有任何改进建议吗？

Answer 1

我认为你的代码中还有其他东西搞砸了; 检查这个jsfiddle ，我复制并粘贴了你的代码并且只添加了：

 .dragMe { background-color:#0f0; } .preview-holder { background-color:#000!important; } 

只需着色它们就可以看到小部件。 除此之外，我唯一改变的是按钮的文字和你的“…… ETC”。 如果您尝试通过按钮拖动它，它不会拖动，但您可以从窗口小部件上的任何其他位置拖动。

如果由于某种原因你需要通过按钮拖动，我建议将其更改为非输入/按钮元素，并使用JavaScript模拟所需的任何function。

当我的网格给我带来麻烦时，这就是我检查的内容：

• 打开/关闭标签全部匹配
• 数据属性有意义（如果小部件重叠，Gridster会变得疯狂）

• 风格正在适当地应用 – 确保它看起来像你的想法。

  我有几次我期待看到一件事，因为我没有假设javascript是错误的，但它缺少CSS样式。

Answer 2

我事物Gridster在

元素下面需要一个元素（例如div或ul ）：

 
 
 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 
 
 //button stuff here  
 
 ... ETC 
  

和JavaScript：

 var gridster = $(".gridster div.gridster-container").gridster({... 

您也可以像在网站上一样使用ul和li 。