Sortable: Slow in Chrome when many elements in the page

[Keyamoon]

Try this test in Chrome: http://jsbin.com/nizag/1/edit
(You might need to press the "Run with JS" button in jsbin.)

Sortable was only applied to the first 30 elements. If you try dragging/sorting elements in this first group, you will notice the poor performance. This is only the case in Chrome. Safari and Firefox performed well in my tests.

My guess is that one of the events binded to document might be causing it.

[bes-internal]

Сonfirm the poor performance in Chrome 33.0.1750.146 at Windows, but not a linux version.
Think this is not a library problem

[RubaXa]

Tried to investigate the problem, but did not understand.
https://www.dropbox.com/s/3isije7ncn98ky8/Screenshot%202014-03-04%2020.18.20.png
— as you can see, the method itself fastest.

[durasj]

I can confirm bad performance on Chrome 33.0.1750.146 as well and seems much more fluid on Firefox.

[cheryllium]

@RubaXa Can we re-open this? It is still an issue with large element sets. Please see: http://jsbin.com/nebiyigimo/edit?html,css,js,output

The container in this example has 2000 sortable elements. If you click to drag-and-drop them, there will be lag unless you move the mouse slowly.

I am using Opera 46.0.2597.39 (PGO) on Windows 8 64-bit, laptop computer. This is the latest version of Opera. (I realize the issue states Chrome in the title, but I think it is related since they both use Webkit)

Aside: I need to allow the user to order thousands of elements, and was thinking of using drag-and-drop to do it. If this isn't a viable solution, what would be a good alternative?

[tsu1980]

Im facing same problem. Maybe this is CSS matter.

If not using position:relative, performance significantly better.

Try below css.

.cell {
  float: left;
  width: 40px;
  height: 40px;
  background: #ccc;
  margin: .5em;
  /*position: relative;*/
  float: left;
}

.cell span {
  /*position: absolute;
  left: 0;
  bottom: 0;*/
  padding: 10px;
}

[jpsear]

@tsu1980 Thanks for this! It made a marked improvement to a large set of draggable elements that was causing issues for me.

[KnIfER]

Removing position:relative only benefits single-drag-and-sort. for multiple dragging and dragging across lists among tons of items, I have to dynamically turn off the animation.

[drews256]

@KnIfER how are you dynamically turning off the animation? I am dragging between columns and when I get to more than 100 or so items in my column, the transition from column to column is quite slow.

[jeffsupancic]

This is still an issue. The performance is much better in Firefox, so not sure if there's anything this library can do.