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.
