0

我正在尝试使用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 文件。有什么改进的建议吗？

4

2 回答 2

1

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

<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喜欢他们在他们的网站上使用的内容。

于 2014-04-01T10:36:12.383 回答
0

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

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

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

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

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

  • 打开/关闭标签全部匹配

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

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

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

于 2014-03-24T04:10:09.083 回答