Gridstack динамически создаваемые виджеты не перетаскивают - PullRequest
Новая
       23

Gridstack динамически создаваемые виджеты не перетаскивают

0 голосов
/ 03 октября 2018

Я использую библиотеку 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)
    }

Виджет успешно создается.Я тоже могу изменить его размер. Но проблема в том, что они не перетаскиваются.Я могу видеть ui-draggable класс в моих элементах виджета html, но они не перетаскиваются.

Если я уже определил виджеты в своем макете и затем инициализировал стековую сетку, они работают нормально.

1 Ответ

0 голосов
/ 04 октября 2018

Ознакомьтесь с демонстрационным примером сетки с плавающей точкой Gridstack http://gridstackjs.com/demo/float.html

Добавление еще одного div решит вашу проблему - вам нужно поместить div с class = "grid-stack-item-content" во вложенный 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)
}

Это исправит вашу проблему и правильно добавит виджет, который вы теперь можете перетаскивать как обычно.Надеюсь, это поможет!

...