HTML element jumping when using jQuery UI sortable

Element jumps when using jQuery UI Sortable

by ,

If your website is using jQuery UI Sortable, you may experience a jumping effect when you begin to drag containers or box elements. Some solutions suggest using the jQuery Draggable Widget cursorAt: option, however, this did not prevent the elements from jumping.

While dragging, as shown in the image below, you will see that the cursor (crosshairs) jumps to a location that is about 150 pixels higher than the element that is being dragged, which is a result of the jump.

jumping HTML elements when using jQuery UI Sortable

Below is the initial HTML and jQuery:


<div id="sortable"> <div>Box one<div> <div>Box two<div> <div>


   cursor: "move",


This may be the result of padding or a margin applied to the parent element. In this example, there was a negative margin of -7.5px that assigned to the parent element by an external css file named module-layout.min.css.


The solution was to override the negative margin and set to zero. As a result the elements no longer jumped and the dragging effect was much smoother.

Prevent HTML element from jumping – jQuery UI Sortable
Article Name
Prevent HTML element from jumping – jQuery UI Sortable
If you are using Bootstrap, you may wind up experiencing elements jumping when you begin to drag them when using the jQuery UI Sortable widget.
Publisher Name
Web Development Reference
Publisher Logo