JSFiddle - React, Tailwind, and code Playground

by Nate Balcom

HTML

<div class="members">
  <p>Content for New Div Tag Goes Here</p>
  <ul id="sortable1" class="sortable">
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
    <li class="ui-state-default">Item 8</li>
    <li class="ui-state-default">Item 9</li>
    <li class="ui-state-default">Item 10</li>
  </ul>
</div>
<div class="members">
  <p><u>Content for New Div Tag Goes Here</u></p>
  <ul id="sortable2" class="sortable">
    <li class="ui-state-highlight"><u>Item 1</u></li>
    <li class="ui-state-highlight"><u>Item 2</u></li>
    <li class="ui-state-highlight"><u>Item 3</u></li>
    <li class="ui-state-highlight"><u>Item 4</u></li>
    <li class="ui-state-highlight"><u>Item 5</u></li>
    <li class="ui-state-highlight"><u>Item 11</u></li>
    <li class="ui-state-highlight"><u>Item 12</u></li>
    <li class="ui-state-highlight"><u>Item 13</u></li>
    <li class="ui-state-highlight"><u>Item 14</u></li>
    <li class="ui-state-highlight"><u>Item 15</u></li>
  </ul>
</div>

<div class="demo-description">
<p>Sort items from one list into another and vice versa, by passing a selector into the <code>connectWith</code> option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function (i.e., <code>connectWith: '.myclass'</code>).</p>
</div>

CSS

.members {
    width:175px;
    height:200px;
    overflow:scroll;
    float: left;
    border: 3px solid black;
    margin: 5px;
}

#sortable { 
    border:#666 solid;
    list-style-type: none; 
    float: left; 
    margin-right: 10px; 
    margin-left: 5px;
}

#sortable1, #sortable2 { 
list-style-type: none; 
margin: 0; padding: 0 0 2.5em; 
float: left; margin-right: 10px;
}

#sortable1 li, #sortable2 li { 
margin: 0 5px 5px 5px; 
padding: 5px; 
font-size: 1.2em; 
width: 120px; 
}

body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

#sortable2 li {
    border: 1px dotted red;
}
table {
font-size: 1em;
}

.demo-description {
clear: both;
padding: 2px;
font-size: 1.3em;
line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
background-position: top;
}

JavaScript

$(function(){
  $("#sortable1").sortable({
    helper:"clone",
    connectWith: "#sortable2",
    start:function(event,ui){
      saveMe = $(ui.item).clone();
      startingList = $(ui.item).parent();
      $(ui.item).show();
      saveMe.insertAfter($(ui.item) ).hide();
    },
    stop: function(event, ui){
        if(startingList.attr("id") == $(ui.item).parent().attr("id") ) {
            // At this point, we've dropped it on the original list.
            //  Remove the clone we made.
            saveMe.remove();
        } else {
            // this can be done either here, or in the remove() func.
            //  I'm thinking this is more intuitive than to re-display
            //  the item in the remove func.
            saveMe.show();
        }
    }
  }).disableSelection();
  $("#sortable2").sortable({
        helper:"clone",
        start: function(event, ui){
            $(ui.item).show();

        },

    }).disableSelection();
    
});