JSFiddle - React, Tailwind, and code Playground

by endemic

HTML

<div id="move"></div>
<div id="res"></div>
<div id="first"></div>

CSS

#move {top:50px; left:30px; width:100px; height:20px;background-color:#ccc;}
#first {visibility:hidden;}

JavaScript

$(document).ready(function(){    
    $('#move').draggable({
       axis: 'x',
       start: function(e,ui){
           var x0 = ui.position.left;       
           $('#first').html(x0);
           },
       stop: function(e,ui) {
               var x1 = ui.position.left;     
               var x2=$('div#first').text();
                var res=x1-x2;
                $('#res').html(res);
                }
            });
    });