JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div class="drag"> 
        <span class="click">click me 1</span><span class="drag-helper"> drag me</span>
    </div>
    <div class="drag">
        <span class="click">click me 2</span><span class="drag-helper"> drag me</span>
    </div>
    <div class="drag">
        <span class="click">click me 3</span><span class="drag-helper"> drag me</span>
    </div>
<div id="drop"></div>

CSS

#drop{
    width:200px;
    height:200px;
    background:grey;
}

JavaScript

$('.drag').draggable({
        handle: ".drag-helper",
        revert: "invalid"

    });
    $('.click').click(function (e) {
        $("#test").html("clicked " + e.target.innerHTML);
    });
$("#drop").droppable({
    accept:".drag",
    drop: function(event,ui){
        $(ui).draggable("disable");
    }
});