JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div class="item" id="1">Item 1</div>
<div class="item" id="2">Item 2</div>
<div class="item" id="3">Item 3</div>
<div class="item" id="4">Item 4</div>

<br />

<div id="dropStuffHere"></div>

<div id="logger"></div>

<button id="showIt">Show</button>

CSS

.item { width: 100px; height: 20px; background: red; }

#dropStuffHere { width: 200px; height: 100px; background: blue; display:none; }

.dropHover { background: green; }

JavaScript

$(function(){
    var logger = $("#logger"),
        showIt = $("#showIt");
    
    $(".item").draggable({
        opacity: 0.7,
        helper: "clone",
        containment: "document",
        appendTo: 'body',
        connectToSortable: "#dropStuffHere"
    });
    
    $("#dropStuffHere").droppable({
        hoverClass: 'dropHover'
    }).sortable({
        axis: "y",
        receive: function(event,ui){
            logger.append("Recieved");
            setTimeout(function(){
                logger.html("");
            },800);
        }
    });
    
    $("#showIt").click(function(){
        $("#dropStuffHere").toggle("fast"); 
    });
});