网格不能动态移动小部件

Gridster not dynamically moving widgets

本文关键字：小部 移动 动态 不能 不能动 网格      更新时间：2023-09-26

我正在尝试使用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，它在doc ready

中
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文件。有什么改进的建议吗?

我认为你的代码中有其他东西把它搞砸了;检查这个文件，我复制并粘贴了你的代码，只添加了:

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

只是给它们上色，这样你就能看到小部件了。除此之外，我唯一改变的是按钮的文本和你的"…"等。如果你试图通过按钮拖动它，它不会拖动，但你可以从小部件上的任何地方拖动。

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

当我的网格出现问题时，我会检查:

  • 开始/结束标签都匹配

  • 数据属性是有意义的(如果小部件重叠，Gridster会发疯)

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

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

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，就像他们在他们的网站上使用的。

我测试了很长时间，你必须从你的代码中删除它:

widget_base_dimensions: [264, 103]

相关文章：