JSFiddle - React, Tailwind, and code Playground

by parvativ

HTML

<button type="button" id="draggable1" class="ui-widget-content">
Drag 1
</button>
<button type="button" id="draggable2" class="ui-widget-content">
Drag 2
</button>

CSS

#draggable1 {
    width: 150px;
    height: 50px;
    padding: 0.5em;
}

#draggable2 {
    width: 150px;
    height: 50px;
    padding: 0.5em;
}

JavaScript

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