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="Thursday" class="draggable ui-widget-content">Thursday</div>  
<div id="Friday" class="draggable ui-widget-content">Friday</div>  

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

<div id="drop2" class="droppable ui-widget-header">2</div>

<div id="drop3" class="droppable ui-widget-header">3</div>

CSS

.draggable {
    background-color: tomato;
    width: 200px;
    padding: 5px;
    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 order = this.id;
            alert(order);
            var day = draggable.attr("id");
            alert(day);
        }
    });
});