JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="drag" class="cloneClass"></div>
</div>
<div id="results"></div>

CSS

.cloneClass {
    width:114px;
    height:114px;
    cursor:move;
    background:url(http://www.websheets.biz/wellman/images/draggable.png) no-repeat; 
}

#results {
    position:relative;
    top:70px;
    border: solid black 1px;
    width:570px;
    height: 90px;
    padding-left:10px;
}

JavaScript

$(document).ready(function(){
 
    var dragOpts = {
        stop: function(e, info) {
              var rel = $("<p />", {
                  text: "The helper was moved " + info.position.top + "px down, and " + info.position.left + "px to the right of its original position."
              });
            
              var offset = $("<p />", {
              text: "The helper position is now " + info.offset.top + "px from the top edge of the viewport, and " + info.offset.left + "px from  the left edge to the viewport. "
              });
            
              $("#results").empty().append(rel).append(offset);
            }
    };
   
    $("#drag").draggable(dragOpts); 
    
});