JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="drag_border"> 
<div id="draggable" style="width:500; height:800">Drag me</div> 
</div> 
<p>Top: <span id="top"></span></p>
<p>Left: <span id="left"></span></p>

CSS

div { border: solid 1px #ddd; width: 100px; height: 100px; }

JavaScript

$("#draggable").draggable({ 
  grid: [50, 20],
  drag: function(e, ui) {
    var top = ui.position.top;
    var left = ui.position.left;
    $("#top").html(top);
    $("#left").html(left);
  }
});