JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<div class="draggable">here are some draggables</div>
<div class="draggable">you can drop any of these</div>
<div class="draggable">in the text box and the</div>
<div class="draggable">text will be set to its contents!</div>
<div id="droppableHolder">
    Drop in this text box:<br />
    <br />
    <input type="text" id="droppable" />
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 11pt;
}
.draggable {
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
.active {
    border: 2px solid #6699ff;
}
#droppable {
    font-size: 14pt;
    width: 400px;
}
#droppableHolder {
    margin-top: 5em;
}

JavaScript

$(function() {
    $(".draggable").draggable({
        revert: true,
        helper: 'clone',
        start: function(event, ui) {
            $(this).fadeTo('fast', 0.5);
        },
        stop: function(event, ui) {
            $(this).fadeTo(0, 1);
        }
    });
    
    $("#droppable").droppable({
        hoverClass: 'active',
        drop: function(event, ui) {
            this.value = $(ui.draggable).text();
        }
    });
});