Я использую сортировку jquery-ui, и моя идея - применить сортировку к элементам, появляющимся при прокрутке.
Я использую следующий код:
var gridTop = 0,
gridBottom = container.outerHeight();
$('#play-list').on('scroll', function () {
$('#play-list li:not(.selectableHide):not(.sorting-initialize)').each(function () {
var thisTop = $(this).offset().top;
if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
if ($(this).attr('data-hour') != houseScope) {
houseScope= $(this).attr('data-hour');
console.log(houseScope);
}
$(this).addClass("sorting-initialize");
var waitInterval = setInterval(() => {
timeout += timeout;
if (timeout == 300) {
clearInterval(waitInterval);
$('#play-list .sortable').sortable('refresh');
timeout = 10;
}
}, timeout);
}
});
});
Я добавил журнал, чтобы проверить время, в которое я сейчас нахожусь в списке воспроизведения во время прокрутки.
Все работает нормально при простой прокрутке, но когда я перетаскиваю элемент и прокручиваю при его перетаскивании, я вижу, что время по-прежнему меняется правильно, но «sorting-initialize» не добавляется.
EDIT:
После дальнейшей отладки я вижу, что проблема не в том, что класс не добавляется, а в том, что DOM не обновляется при перетаскивании. В консоли Chrome (элемент inspect открыт) видно, что класс добавляется, но DOM «заморожен» в своем предыдущем состоянии, пока не завершено перетаскивание, поэтому я не могу выбросить элемент на новые сортируемые элементы. Какие-нибудь решения для этого?
Спасибо