JSFiddle - React, Tailwind, and code Playground

by vincentieo

HTML

<div id="monday" class="draggable ui-widget-content">Monday</div>  
<div id="tuesday" class="draggable ui-widget-content">Tuesday</div> 
<div id="wednesday" class="draggable ui-widget-content">Wednesday</div> 

<div id="drop1" class="droppable ui-widget-">1</div>

CSS

.draggable {
    background-color: tomato;
    width: 200px;
    margin: 1em;
}

.droppable {
    background-color: gray;
    width: 200px;
    padding: 5px;
    margin: 1em;
}

JavaScript

$(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        drop: function(event, ui) {
             var draggable = ui.draggable;
             var id = draggable.attr("id");            
            alert(id);
        }
    });
});