JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="drag"><p>Drag me!</p></div>


<div class="drop"></div>

CSS

.drag {
    border: 1px solid gray;
    width: 50px;
    height: 50px;
}

.drop {
    border: 1px solid gray;
    margin: 50px auto;
    padding: 10px;
}

JavaScript

$(".drag").draggable();

$(".drop").droppable({
    accept: ".drag",
    drop: function( event, ui ) {
        $(ui.draggable)
            .addClass("ui-state-highlight")
            .find("p")
                .html("Dropped!");
        
        $(".drop").append('div');    
    }
});