我正在使用 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 类,但它们没有拖动。
如果我已经在布局中定义了小部件,然后初始化 stackgrid,那么这些小部件就可以正常工作。
最佳答案
在此处查看 Gridstack float 网格演示 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)
}
这解决了您的问题并正确添加了一个您现在可以正常拖动的小部件。 希望有帮助!
关于javascript - Gridstack动态创建的小部件不被拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52622504/