Question

I have a draggable list of elements. The only jQuery I am using is:

$('.section_rows').sortable();

This works fine. However, when I am at the bottom of the page (vertical scroll all the way at the bottom), and click a row to drag and sort it, the page ‘jumps’ up by 55px. While this isn’t a big deal functionally, it is a terrible user experience (and the draggable rows are located at the bottom of this page, so this hiccup invariably happens).

I took a look at the HTML, and it looks like jQuery is adding a class called '.ui-sortable-helper' which contains a style with a 55px height.

Is there a way that I can disable this or force the page to ‘not move’ when the draggable item is selected?

Answer 1

It sounds like you need a drop placeholder to keep the list at the same height. Try:

$(".section_rows").sortable(P{
   placeholder: 'ui-state-highlight'
});

Make sure that the CSS for .ui-state-highlight is set to the appropriate height.