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.

Below is the initial HTML and jQuery:

HTML

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

jQuery

$('#sortable').sortable({
   cursor: "move",
});

$('#sortable').draggable();

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.

Solution

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.