JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag-me"><b>Drag Me</b></div>
<div id="last-el">Last Element</div>

CSS

#drag-me {
    background: #ccf;
    padding: 6px 10px;
}
#last-el {
    background: #cfc;
    padding: 6px 10px;
}

JavaScript

$("div").insertAfter("body");
$("#drag-me").draggable({axis: "y"});

// The issue is that the draggable div is temporarily removed
// from the document and re-appended to its parent when the
// drag begins. As a result, in this example, the green
// element becomes the first child and instantly jumps up.

// If you comment out line 1 (leaving the divs in the body),
// the issue does not occur.