Gridster不动态移动小部件

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

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

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

这是我的布局:

... 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文件。 有任何改进建议吗?

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

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

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

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

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

  • 打开/关闭标签全部匹配
  • 数据属性有意义(如果小部件重叠,Gridster会变得疯狂)
  • 风格正在适当地应用 – 确保它看起来像你的想法。

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

我事物Gridster在

元素下面需要一个元素(例如divul ):

 
... ETC

和JavaScript:

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

您也可以像在网站上一样使用ulli