JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	Drag "text" to between "kolom 2 a" and "kolom 2 b", but do not release<br />
	Move it up to between "text 1" and "text 2" and release.<br />
	The revert animation is shown while it should not be.<br />
	Now change the order of "kolom 2 a" and "kolom 2 b". The red square drag helper is not removed.<br />
	<br />
	<br />
	<br />
	<div>
	  <div class="main">

	    <div class="container" id="b1">
	      <div class="block">
	        text 1
	      </div>
	      <div class="block">
	        text 2
	      </div>
	      <div class="block">
	        <table style="width: 100%;">
	          <tr>
	            <td>
	              <div class="container" id="b1b1">
	                <div class="block">
	                  kolom 1
	                </div>
	              </div>
	            </td>
	            <td>
	              <div class="container" id="b1b2">
	                <div class="block">
	                  kolom 2 a
	                </div>
	                <div class="block">
	                  kolom 2 b
	                </div>
	              </div>
	            </td>
	          </tr>
	        </table>
	      </div>
	    </div>
	  </div>
	  <div class="palette">
	    <div class="block">text</div>
	  </div>
	</div>

CSS

.main {
	  width: 600px;
	  float: left;
	}

	.palette {
	  width: 140px;
	  float: left;
	}

	.block {
	  border: 2px solid green;
	  margin: 2px;
	}

	.palette,
	.container {
	  border: 2px solid red;
	  margin: 2px;
	  overflow: hidden;
	}

	.palette .ui-sortable-placeholder {
	  display: none;
	}

	.ui-sortable-helper,
	.ui-draggable-dragging {
	  background-color: red;
	  width: 40px;
	  height: 20px;
	}

	.container {
	  min-width: 50px;
	  min-height: 50px;
	}

JavaScript

$(function() {

  var nextid = 1;

  $(".container").sortable({
    connectWith: ".container",

    helper: function(event) {
      var helper = $("<div class='ui-widget-header' style='width: 40px; height: 20px;'>#</div>");
      return helper;
    }
  });

  $(".palette .block").draggable({
    connectToSortable: ".container",
    helper: "clone",
    revert: "invalid"
  });
});