Sortable: Very slow and laggy in google chrome with many items
I have seen a few issue with this problem but nothing helped for me. Is it a solved this problem?
See short video (~30sec),
- Its fast with a few items
- Its very slow with many items
How how can be it solved?
Code
`var $uiSortableWrapper = $(‘.ui-sortable-wrapper’, this); if ($uiSortableWrapper.length) { require([“sortable”], function (Sortable) {
var wrapper = this;
var sortablePages = $('#sortable-pages').data('url');
var containers = $('.ui-sortable-wrapper');
containers.each(function () {
var $thisContainer = $(this);
var _sortable = Sortable.create(this, {
animation: 150,
scrollSensitivity: 200,
draggable: ".col-draggable",
group: 'colmediaobject',
ghostClass: 'ghost',
onStart: function () {
$('#snippet--content').addClass('sortable-life-cycle');
//$('html').addClass('poev-none');
$thisContainer.removeClass('now-not-connected');
$thisContainer.find('.col-media-object')
.removeClass('col-media-object');
$thisContainer.find('.col-media-separator').remove();
},
onAdd: function (evt) {
var pages = _sortable.toArray();
$.nette.ajax({
url: sortablePages + '§ionId=' + evt.srcElement.dataset.sectionId + '&pages=' + pages + '&redraw=0',
off: ['history', 'unique'],
netteExt: ['ajax-catalogue-overlay']
}, function () {
});
},
onEnd: function (evt) {
//$('html').removeClass('poev-none');
var pages = _sortable.toArray();
$.nette.ajax({
url: sortablePages + '§ionId=' + evt.srcElement.dataset.sectionId + '&pages=' + pages + '&redraw=1',
off: ['history', 'unique'],
netteExt: ['ajax-catalogue-overlay']
}).done(function(payload){
$('#snippet--content').removeClass('sortable-life-cycle');
});
},
});
});
});
}`
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 1
- Comments: 17 (6 by maintainers)
This is still an issue. The performance is much better in Firefox, so not sure if there’s anything this library can do.
The issue still remains.
@evaneykelen You shouldn’t have 2000 items in the list at once. Use a lazy loading library to only load the items that are in view.
Same issue here. Seeing 4-5 seconds delay before
onChange
fires after dropping an item in a 2000 item list. Found workaround by applyingforceFallback: true
. On Chrome 78, macOS.