网格堆栈动态创建的小组件不会拖动

Question

我正在使用GridStack库为我的小部件创建响应式布局。这是我在单击按钮时创建小部件的功能

function AddWidget()
{
var grid =  $('.grid-stack').data('gridstack');
var html = '<div class="grid-stack-item-content">';
html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
html += '</div>';
grid.addWidget($(html), 0, 0, 4, 1)
}

小部件正在成功创建。我也能够调整它的大小。但问题是它们不可拖动。我可以在我的小部件项目 html 上看到 ui-draggable 类，但它们没有拖动。

如果我已经在我的布局中定义了小部件，然后初始化堆栈网格，那么它们工作正常。

Answer 1

在此处查看 Gridstack 浮点网格演示 http://gridstackjs.com/demo/float.html

添加另一个div 可以解决您的问题 - 您需要将带有 class="grid-stack-item-content" 的div 嵌套在另一个div 中。这个顶部div 将被初始化为小部件。

例如：

function AddWidget()
{
var grid =  $('.grid-stack').data('gridstack');
var html = '<div>'
html += '<div class="grid-stack-item-content">';
html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
html += '</div></div>';
grid.addWidget($(html), 0, 0, 4, 1)
}

这将修复您的问题并正确添加您现在可以正常拖动的小部件。 希望对您有所帮助！

Answer 2

当你需要帮助，别人给你错误的信息时，情况会变得更糟，如果你不知道去哪里，不要表明，除了不尊重之外，它还迫使人们寻找不存在的东西。

可能你的错误和我的一样，我忽略了一个父div，包括直接<div class="grid-stack-item-content">，当它不应该的时候，因为它是<div class="grid-stack-item">的女儿，请参阅正确的格式：

<div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"><input type="text"></div>
</div>
</div>

把它放在点击功能中，看看它是否适合你：

<script>
$grid = $('.grid-stack'); 
const widget = '<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"><input type="text" class="form-control"></div></div>';
$grid.data('gridstack').addWidget(widget);
</script>

Answer 3

对我来说，jQuery正在其他地方加载到页面上，并且导致与添加小部件后添加resize元素的GridStack部分发生冲突，此外还导致任何后续JS失败。

我通过删除<script>标签来添加 GridStack JS 并改用以下内容来解决此问题：

window.addEventListener("load", function(){
jQuery.getScript("https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack.all.js", function(){;
// your GridStack code
})
})

幸运的是，框架作者计划很快删除jQuery！

Answer 4

你可以试试

let grid = GridStack.init();
let customContent = '<span>My custom content</span>';
const DEFAULT_HEIGHT = 2;
const DEFAULT_WIDTH = 2;

grid.addWidget({w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT, content: customContent});