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

I thing 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。

Answer 2

我认为您的代码中还有其他内容会弄乱它;检查此jsfiddle，我复制并粘贴了您的代码，但只添加了：

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

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

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

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

打开/关闭标记全部匹配
数据属性有意义（如果小部件重叠，Gridster会发疯）
正确应用样式 - 确定样式假设看起来像你的想法。

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

Gridster不动态移动小部件

2 个答案: