Category Archives: jQuery UI

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.