JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<ul data-role="listview" class="sortable-list" data-filter="true">
  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2 class="droppable" id="cat1">EMPTY</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
    </ul>
  </li>
  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2 class="droppable" id="cat2">Birds</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id1"><a href="#">Condor</a></li>
      <li id="id2"><a href="#">Eagle</a></li>
      <li id="id3"><a href="#">Sparrow</a></li>
    </ul>
  </li>
  <li data-role="collapsible" data-iconpos="right" data-inset="false">
    <h2 class="droppable" id="cat3">Fish</h2>
    <ul data-role="listview" data-theme="b" class="sortable-list1">
      <li id="id4"><a href="#">Salmon</a></li>
      <li id="id5"><a href="#">Pollock</a></li>
      <li id="id6"><a href="#">Trout</a></li>
    </ul>
  </li>
</ul>

CSS

.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, 
.ui-listview>li>a.ui-btn {
overflow: visible !important;
}

.sortable-list1 {
    min-height:50px;
    padding:10px
}

JavaScript

var receiver;
$(document).ready(function() {
  $('.sortable-list').sortable({
    connectWith: '.sortable-list',
    dropOnEmpty: true,
    update: function(event, ui) {

    }
  });

  $(".droppable").droppable({
    drop: function(event, ui) {
      var collapsedList = $(this).parent();
      if ($(collapsedList).collapsible("option", "collapsed")) {
        $(collapsedList).collapsible("expand");
      }
      receiver = $(this).parent().find('.sortable-list1');
    }
  });

  var sortupdate = function(event, ui) {

  };

  $('.sortable-list1').on("sortupdate", sortupdate);
  $('.sortable-list1').sortable({
    connectWith: '.sortable-list1',
    dropOnEmpty: true,
    stop: function(e, ui) {
      if (receiver) {
        receiver.append(ui.item);
        receiver = null;
      }
    }
  });
});