JSFiddle - React, Tailwind, and code Playground

by cstigler

HTML

<p>Unsortable</p>
<ul id="unsortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<p>Sortable</p>
<ul id="sortable">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<ul>
<li id="item7">Item 7</li>
</ul>

CSS

body {
    padding: 10px;
}

ul {
    border: 1px solid black;
    margin-bottom: 10px;

}

li {
    border: 1px dotted black;
    margin: 2px;
    padding: 2px;
}

JavaScript

$('#sortable').sortable({
    tolerance: 'pointer',
    revert: true,
    revertDuration: 250,
    helper: 'clone',
    start: function(e, ui) {
       ui.item.css('visibility', 'hidden');
    },
    stop: function(e, ui) {
        ui.item.css('visibility', 'visible');
    }
});

      $('#item7').sortable({
          revert: true,
          revertDuration: 250,
          connectWith: '#sortable',
          items: '*'
      });

/*
$('#unsortable').sortable({
    revert: true,
    revertDuration: 250,
    connectWith: '#sortable'
});    
*/

$('#unsortable li').draggable({
  tolerance: 'pointer',
  revert: true,
  revertDuration: 250,
  helper: function(e) {
      var newEl = $('<li>');
      newEl.text($(this).text());
      newEl.css('z-index', '2');
      $(newEl).sortable({
          revert: true,
          revertDuration: 250,
          connectWith: '#sortable',
          items: '*'
      });
      return newEl.get(0);
  },
  start: function(e, ui) {
    // $(this).css('visibility', 'hidden');
  },
  stop: function(e, ui) {
    // $(this).css('visibility', 'visible');
  }
});