JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    This shows the problem with the current jQuery UI draggable and droppable implementation.    If the original position of the dragged element changes, the cursor alignment gets messed up.
</p>

<div class='trash'></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

CSS

li {
    background: blue;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.trash {
    position: absolute;
    top: -999999px;
    background: lightgrey;
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
}
.trash.ui-active {
    position: static;
}
.trash.ui-hover {
    background: yellow;
}

JavaScript

$('li').draggable({
    revert: true
});

$('.trash').droppable({
    activeClass: 'ui-active',
    hoverClass: 'ui-hover'
});