JSFiddle - React, Tailwind, and code Playground

by asif097

HTML

<div id="container" style="width: 400px; height: 400px; border: 1px solid black; position: relative;" >
    <div id="draggable" style="width: 150px; height: 150px; background-color: black; cursor: move; position: absolute;">
        <div class="count" style="color: white"/>               
    </div>
</div>

JavaScript

jQuery(function() {
    jQuery("#draggable").draggable({
        containment: "#container",
        scroll: false,
        drag: function(event) {
            o = $(this).offset();
            p = $(this).position();
            jQuery('.count').html(p.left + ', ' + p.top);
        }
    });

    function updateCoordinate(newCoordinate) {
        jQuery(".count").text(newCoordinate);
    }
    
});