JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul>
  <li id="draggable" class="ui-state-highlight">Draggable</li>
</ul>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<div id="step1">Step 1. Drag the Draggable to here and drop it. It will enter the sortable. Observe the correct revert behavior.</div>
<div id="step2">Step 2. Drag the Draggable to here and drop it. Naturally it will not enter the sortable.</div>
<div id="step3">Step 3. Drag the Draggable to here and drop it. It will enter the sortable, but revert behavior is now broken.</div>

CSS

li {
    width: 100px;
}

#step1 {
    position:fixed;
    left:200px;
    top:50px;
}

#step2 {}

#step3 {
    position:fixed;
    left:200px;
    top:120px;
}

JavaScript

$(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });