JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="square">
    <span class="handle">Handle</span>
</div>
<div class="square">
    <span class="handle">Handle</span>
</div>
<div class="square">
    <span class="handle">Handle</span>
</div>
<div class="square">
    <span class="handle">Handle</span>
</div>

CSS

.square {
    width: 50px;
    height: 50px;
    outline: 1px solid #000;
}

JavaScript

$("body").delegate(".square", "mouseenter", function() { 
    $(this).draggable({
        handle: ".handle"
    });
    
    $(this).one("mouseleave", function() { $(this).draggable('destroy'); })
});