Gridster 没有动态移动小部件

Question

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

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

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

这是我的布局：

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

这是我的 js，已准备好文档

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

我认为 Gridster 需要在 <div class="gridster"> 元素下方添加一个元素（例如 div 或 ul）：

<div class="gridster">
     <div class="gridster-container">
         <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>

    ... ETC
     </div>
</div>

还有 JavaScript：

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

您也可以使用ul 和li，就像他们在他们的网站中使用的一样。

Answer 2

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

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

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

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

当我的网格给我带来麻烦时，我会检查以下内容：

• 开始/结束标签都匹配

• 数据属性有意义（如果小部件重叠，Gridster 会发疯）

• 样式应用得当 - 确保它是 应该看起来像你想的那样。

  我有几次期待看到一件事，因为我不认为 javascript 有问题，但它缺少 CSS 样式。