JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="dragThis">
    <ul>
        <li id="posX"></li>
        <li id="posY"></li>
    </ul>
</div>

CSS

#dragThis {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
}

JavaScript

$('#dragThis').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });