JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<ul id="list_a" class="connected_sortable">
  <li value="0">test text a1</li>
  <li value="1">test text a2</li>
</ul>

<ul id="list_b" class="connected_sortable">
  <li value="2">test text b</li>
  <li value="2">test text b</li>
  <li value="2">test text b</li>
</ul>

<br style="clear:both" />
list_a item to list_b = show placeholder in list_b<br />
list_b item to list_b = show placeholder in list_b<br />
list_a item to list_a = do not show placeholder, or use a placeholder that is styled display:none; in list_a<br />
list_b item to list_a = do not show placeholder, or use a placeholder that is styled display:none; in list_a<br />

CSS

ul {outline:1px red solid;float:left;margin:20px}

li {padding:5px 20px;margin:5px;outline:1px green solid;cursor:pointer}

.placeholder {background:gray;padding:5px 20px;margin:5px;display:block;height:20px}

JavaScript

$( "#list_a" ).sortable({
    connectWith: "#list_b"
});
$( "#list_b" ).sortable({
    placeholder: "placeholder"
});

$( "#list_a, #list_b" ).disableSelection();