JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="report">
  <ul>
    <li>Top:
      <label class="position top"></label>
    </li>
    <li>Left:
      <label class="position left"></label>
    </li>
    <li>O Top:
      <label class="offset top"></label>
    </li>
    <li>O Left:
      <label class="offset left"></label>
    </li>
    <li>E Top:
      <label class="mouse top"></label>
    </li>
    <li>E Left:
      <label class="mouse left"></label>
    </li>
    <li>My Top:
      <label class="my top"></label>
    </li>
    <li>My Left:
      <label class="my left"></label>
    </li>
  </ul>
</div>
<div class="container">
  <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
  </div>
</div>

CSS

#draggable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  border: 1px solid red;
}

.container {
  height: 500px;
  width: 500px;
  border: 1px solid green;
  transform: scale(1.6);
  position: relative;
  left: 300px;
  top: 150px;
}

#report {
  top: 3;
  left: 3;
  font-size: .65em;
}

#report ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#report label {
  display: inline-block;
}

JavaScript

$(function() {
  $("#draggable").draggable({
    drag: function(e, ui) {
      $("#report .position.top").html(ui.position.top + "px");
      $("#report .position.left").html(ui.position.left + "px");
      $("#report .offset.top").html(ui.offset.top + "px");
      $("#report .offset.left").html(ui.offset.left + "px");
      $("#report .mouse.top").html(e.clientY + "px");
      $("#report .mouse.left").html(e.clientX + "px");
      // Reset to Mouse, adjust for Scale
      var myScale = parseFloat($('.container').css('transform').split(',')[3]);
      console.log(myScale);
      var myTop = Math.round(ui.position.top / myScale);
      var myLeft = Math.round(ui.position.left / myScale);
      $("#report .my.top").html(myTop + "px");
      $("#report .my.left").html(myLeft + "px");
      ui.position = {
        top: myTop,
        left: myLeft
      };
    }
  });
});