Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why jquery ui draggable is slow in this example

In the jquery ui site, the draggable examples are fast. But with this markup, the plugin is terribly slow:

$("ul.projects").sortable({
    items: ".ui-state-default",
  containment:"parent",
  cursor:"move",
  cursorAt:{left: 90}
});

Codepen

like image 815
Pietro Coelho Avatar asked Jul 08 '14 19:07

Pietro Coelho


1 Answers

Remove all transitions for ul.projects li. It makes the animation slow. Or turn off them for .ui-sortable-helper:

ul.projects li:not(.ui-sortable-helper) {
  float: left;
  margin: 0px 6.5px 12px;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
like image 80
taggon Avatar answered Oct 13 '22 00:10

taggon