Menu

jQuery UI jumping sortable items

Sometimes when creating sortable user interface widgets, some various quirks might happen. One of these is that just after starting dragging element, it jumps of from original location. Element will move above cursor for roughly height of it's parent container minus one sortable element.

There are plenty solutions including JavaScript to fix container height. These are clunky as it need to be assigned to each sortable. Even more problematic when used with Knockout JS sortable, as including JavaScript in HTML attributes is not pretty and really not recommended.

I turned out that properly styled container will remedy jumping issue. The point is to make it's overflow auto:

.my-sortable-container{
    overflow: auto;
}

That's it! Now sorted item should not jump anymore. Credits goes to: http://stackoverflow.com/a/24122186/5444623

This is how described bug look like:

589a0146b7cd24f61774a940

After applying fix dragged element should be under cursor:

589a0380b7cd24a01a89b8fe
  • Projects