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类，但它们没有拖动。

如果我已经在布局中定义了小部件，然后初始化了stackgrid，那么它们就可以正常工作。

Answer 1

在http://gridstackjs.com/demo/float.html上查看Gridstack浮动网格演示

添加另一个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

对我来说，jQuery正在其他页面上加载，并导致与GridStack的部分发生冲突，该部分在添加小部件后添加了resize元素，另外还会导致后续的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 3

当您需要帮助并且人们给您错误的信息时，情况甚至会更糟，如果您不知道要去哪里，请不要表明，除了不尊重外，它还会迫使人们去寻找那些不该做的事情。不存在。

您的错误可能与我的错误相同，我忽略了父div（直接包括<div class="grid-stack-item-content">），但不应该这样做，因为它是<div class="grid-stack-item">的女儿，请参见正确的格式：< / p>

<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>

Gridstack动态创建的小部件不会拖动

3 个答案: