JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div class="draggable">4</div>
<div class="draggable">5</div>
<div class="draggable">6</div>
<br><br>
<div class="droppable" id="1">droppable</div>
<div class="droppable" id="2">droppable</div>
<div class="droppable" id="3">droppable</div>

CSS

.draggable {
    float:left;
    position:relative;
    border: 1px solid red;
    width: 1em;
    margin: 2px;
    -moz-user-select: none;
}
.droppable {
    height: 200px;
    width: 200px;
    border:1px solid blue;
    float: left;
    margin-right: 10px;
		
}

JavaScript

$(".draggable").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});

$(".droppable").droppable({
    accept: '.draggable',
    hoverClass: "ui-state-active",
    drop: function (ev, ui) {
        $(ui.draggable).fadeOut(600, function () {
            $(this).remove();
        });
        var id = $(this).attr('id');
        console.log(id);
    }
});