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

  1. Its fast with a few items
  2. Its very slow with many items

http://bit.ly/2QyoTRI

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 + '&sectionId=' + 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 + '&sectionId=' + 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)

Most upvoted comments

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 applying forceFallback: true. On Chrome 78, macOS.