JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div id="CaveContainer">
<div class="dragThis">
    <ul>
        <li class="posX"></li>
        <li class="posY"></li>
        <li class="finalX"></li>
        <li class="finalY"></li>
    </ul>
</div>

<div class="dragThis">
    <ul>
        <li class="posX"></li>
        <li class="posY"></li>
        <li class="finalX"></li>
        <li class="finalY"></li>
    </ul>
</div>

<div class="dragThis">
    <ul>
        <li class="posX"></li>
        <li class="posY"></li>
        <li class="finalX"></li>
        <li class="finalY"></li>
    </ul>
</div>
</div>

CSS

html, body{height:100%}

.dragThis {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1.5em 1.5em 1.5em;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}
#CaveContainer {
    width:400px;
    height:400px;
    background: #e4e4e4;
    margin:0 auto;
    
}

JavaScript

$('.dragThis').draggable(
    {
        containment: $('#CaveContainer'),
       
        stop: function(){
            var $this = $(this);
            var thisPos = $this.position();
            var parentPos = $this.parent().position();

            var finalxPos = thisPos.left - parentPos.left;
            var finalyPos = thisPos.top - parentPos.top;

            $(this).find('.finalX').text('Final X: ' + finalxPos);
            $(this).find('.finalY').text('Final X: ' + finalyPos);
        }
    });