JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<div id="primaryContainer">
    <h3>Name List</h3>
    <ul id="names">
        <li>Neil Schweiger</li>
        <li>Guy Ekdahl</li>
        <li>Javier Harriston</li>
        <li>Tyrone Nebeker</li>
        <li>Elinor Hamburg</li>
        <li>Guy Trivedi</li>
        <li>Fernando Rozelle</li>
        <li>Carlene Maner</li>
        <li>Mathew Victorian</li>
        <li>Darren Munns</li>
    </ul>
</div>

<div id="secondaryContainer">
    <h3>Names Dropoff</h3>
    <ul id="namesDropOff">
        <li class="placeholder">Drag Items Here To Add</li>
    </ul>
</div>

CSS

body {
 font-family: Arial, Helvetica, Sans-serif;  
 font-size: .875em;    
}

h3 {
  padding-bottom: 5px;
  font-size: 1.1em; 
  font-weight: bold;
}

ul {
  background-color: #ffffff;
  border: solid 1px #777777;
}

ul li, .highlight, .ui-draggable-dragging {
 padding: 4px;   
}

ul li {
 cursor: default;   
}

ul li:hover {
 background-color: #eaf4ff;
}

#primaryContainer, #secondaryContainer {
  width: 200px;            
  padding: 10px;
  border: solid 1px #d3d3d3;
  background-color: #fcfcfc;
}

#primaryContainer {
 float: left;
}

#secondaryContainer {
 display: inline-block;   
 margin-left: 10px;
}

.placeholder {
 color: #555555;
 font-style: oblique;
}

.highlight,.ui-draggable-dragging {
 height: 1.1em;
}

.highlight {
 background-color: #fbf9ee;  
 border: solid 1px #fcefa1;  
}

.highlight-container {
 background-color: #fbf9ee   
}

.ui-draggable-dragging {
  background-color: #f0f0f0;
  border: solid 1px #d3d3d3;
  width: 190px;
}

JavaScript

$(function() {
    $("#names li").draggable({
        opacity: 0.5,
        helper: "clone",
        revert: "invalid",
        revertDuration: 200
    });
    
    var removeIntent = false;
    $("#namesDropOff").droppable({
        accept: function(d) {                                            
            return $(this).find("li:contains('"+d.text()+"')").length == 0;    
        },
        hoverClass:"highlight-container ",
        drop: function(event, ui) {
            $(this).find("li.placeholder").remove();
            $(this).append($(ui.draggable).clone());
        }
    })
    .sortable({
        items: "li:not(.placeholder)",
        placeholder: "highlight",
        receive: function() {
            removeIntent = false;
        },
        over: function() {
            removeIntent = false;
        },
        out: function() {
            removeIntent = true;
        },
        beforeStop: function(event, ui) {
            if(removeIntent == true) {
               ui.item.remove();   
            }
            if($(this).children().size() == 1) {
                $(this).append
                   ("<li class='placeholder'>Drag Items Here To Add</li>");
            }
        }
    });
});