Gridster不动态移动小部件 [英] Gridster not dynamically moving widgets

问题描述

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

I am trying to use Gridster.js to do some drag and drop functionality in my project.

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

I am using a bunch of divs for my widgets, with forms and buttons inside of these, instead of using an unordered list.

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

My issue is that my first column is not being able to drag, and i can not drop my widgets anywhere. They just drop to back to their original spot

这是我的布局：

<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，这是在文档中准备好

and here is my js, which is in 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文件。任何改进建议？

I have both grister.js and the css file. Any suggestions for improvement?

推荐答案

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

I think there is something else in your code that is messing it up; check this jsfiddle, I copied and pasted your code and only added:

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

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

Just coloring them so you can see the widgets. Other than that, the only thing I changed was the text of the buttons and your "...ETC". It doesn't drag if you try and drag it by the button, but you can drag from anywhere else on the widget.

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

If for some reason you need to drag by the button, I would recommend changing it to a non input/button element and simulating whatever functionality you need with JavaScript.

当我的网格给我麻烦时，这里是我检查的：

When my grid gives me trouble, here's what I check:

• /关闭标签都匹配


• 数据属性有意义（如果窗口小部件重叠，则Gridster会变得疯狂）



• 适当地应用样式 - 确定这是
  假设看起来像你的想法。

• Opening/Closing tags all match
• data attributes make sense (Gridster gets crazy if widgets overlap)

• Styles are being applied appropriately - make certain it is supposed to look like what you think.

我有几次，我期待看到一件事，并且因为我没有假设JavaScript是错误的，而是缺少CSS样式。

I had a couple times where I was expecting to see one thing, and because I didn't assumed the javascript was at fault, but it was missing CSS styles.

这篇关于Gridster不动态移动小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！