JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div>I'm a box</div>

<label>Top</label><input type="text" class="top">
<label>Left</label><input type="text" class="left">

CSS

div {
    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
}

JavaScript

$( "div" ).draggable({
    axis: "y",
    stop: function( event, ui ) {
        $( "input.top" ).val( ui.position.top );
        $( "input.left" ).val( ui.position.left );
    }
});