Gridster JS Performance Issue

Question

Я изо всех сил пытался понять, почему GridsterJS работает так медленно для меня, у меня есть гораздо больший проект с использованием сетки, и производительность настолько плоха, что я не могу перетаскивать или изменять размеры любых виджетов на странице. Я был в шоке, чтобы увидеть многое облегченную вниз пример ведет себя точно так же: https://jsfiddle.net/h30pum3b/

#grid li { 
    background-color: green; 
    width: 200px; 
    height: 200px; 
    list-style: none; 
} 

<ul id="grid"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

$("#grid").gridster({ 
    widget_selector: "li", 
    widget_base_dimensions: [200, 200], 
    widget_margins: [10,10], 
    avoid_overlapped_widgets: true 
}); 

Любые подсказки относительно того, что может происходить здесь было бы очень полезно ... Спасибо заранее.

Answer 1

Вам необходимо добавить атрибуты данных, которые использует сетчатка, чтобы он работал правильно.

<li data-col="1" data-row="4" data-sizex="1" data-sizey="1"></li>

Вы можете посетить gridster страницу и посмотреть на HTML структуре он показывает, чтобы увидеть, что я имею в виду. Я сделал несколько трюков для CSS также, вот обновленная скрипка: https://jsfiddle.net/h30pum3b/3/.

Answer 2

Обнаружено, почему, сравнивая с примерами, не было класса «сетчатый», добавьте этот класс в свой элемент сетки перед вызовом gridster(), и производительность становится ожидаемой. Спасибо за помощь Трей.