JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>
<div  class="draggable">
</div>

CSS

.draggable{
    width: 50px;
    height: 50px;
    background-color: #000;
    border: 1px solid #fff;
}
.highlight{
    box-shadow: inset 0px 0px 10px 5px #fed700;
}
.red{
    background-color:red;
}

JavaScript

var currentDraggedElement;
$(".draggable").draggable({
start: function(e){
    currentDraggedElement = e.target;
    $(currentDraggedElement).addClass("red");
},
stop: function(e){
    $(currentDraggedElement).removeClass("red");
},
helper: "clone",
    revert: "invalid"
}).droppable();

$(".draggable").on("dropover", function(e) {
    $(this).addClass("highlight");
});
$(".draggable").on("dropout", function (e){
    $(this).removeClass("highlight");
    currentDraggedElement = null;
});