JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<div class="draggable">
    <p>Draggable</p>
</div>
<div class="draggable">
    <p>Draggable2</p>
</div>
<br>
<div class="droppable" id="droppable">
    <p>Drop here</p>
</div>

<div class="droppable" id="droppable2">
    <p>Drop here 2</p>
</div>

CSS

.draggable {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display:inline-block;
}
.droppable {
    display:inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

JavaScript

$( ".draggable" ).draggable({
    stop: function( event, ui ) {   
        //alert($(this).parent().html());
        if($(this).parent().hasClass('droppable'))
            alert($(this).parent().attr('id'));
    }
});
$(".droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui){
        alert(ui.helper.html());
     $(this).append(ui.helper);   
    }
});