Sortable in 1.12.x much (min 3x) slower than 1.11.x

[cucko]

Here are two js fiddle examples

jq ui 1.11.4: ​https://jsfiddle.net/5z7fw7Lb/1/

jq ui 1.12.0: ​https://jsfiddle.net/5z7fw7Lb/

jq ui 1.12.1: ​https://jsfiddle.net/5z7fw7Lb/2/

[Daijobou]

I can confirm this problem. I have a page with six lists and summary ~3000 items. Chrome crashes with this browser tab, but only with version jquery ui 1.12.1. Sortable in version jquery ui 1.11.4 working fast and fine as replacement.

Other source: ​http://stackoverflow.com/a/41624770/706420

[Stephane]

I can confirm the issue as well

[syddiqua]

Same problem. Anyone will fix it after a year?.. 900 elements take 55sec, with 1.11.4 it takes only a few.

[naitsirch]

Same problem here. I have a small snippet to reproduce the issue:

<ul></ul>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
  var ul = jQuery('ul');
  
  for(var i = 0; i < 2000; i++) {
    ul.append(jQuery('<li>List item ' + i + '</li>'));
  }

  ul.sortable({axis: 'y'});
</script>

I have found out that it is stuck when it assigns the class 'ui-sortable-handle' to the list's items (_setHandleClassName function).

The adding of the class takes longer for each item that has been processed.

[Dustin]

Through benchmarking I have confirmed this to still be a MAJOR performance issue for a large sortable and it still exists in v1.12.1. I have confirmed through benchmarking the following fix to this problem in jQuery UI v1.12.1 by modifying _setHandleClassName().

Change:

$.each( this.items, function() {
        that._addClass(
            this.instance.options.handle ?
                this.item.find( this.instance.options.handle ) :
                this.item,
            "ui-sortable-handle"
        );
    } );

to:

$.each( this.items, function() {
                    (this.instance.options.handle 
                     ? this.item.find( this.instance.options.handle ) 
                     : this.item
                    ).addClass('ui-sortable-handle');
            } );

I found this solution at ​https://stackoverflow.com/questions/20398400/jquery-ui-sortable-call-is-slow-when-applies-to-thousands-of-elements