JSFiddle - React, Tailwind, and code Playground

by lorymole

HTML

<p> 
x-axis/grid Draggable on element defined in rem. (problem: drifts left on small drag).
This draggable should be constrained to be aligned on grid locations. However, tiny drags will cause it to drift off the grid locations.
</p>
<p>
To reproduce, place mouse over rectangle and drag very slightly right. The rectangle position will be adjusted slightly to the left. 
</p>
<p>
The problem seems to be that JQuery UI Draggable is calculating style.left incorrectly.
</p>
<div class="demo-container">
    <div id="bar" class="demo-bar"></div>
    <div id="draggable-rem" class="demo-thumb-style demo-thumb-rem ui-widget-content"
                                   </div>
</div>

CSS

/* Container for all divs */
	 .demo-container {
	     position: relative;
	     display: block;
	     height: 30px;
	     height: 2.5rem;	 
	     margin-left: 10px;
	 }

	 /* Style applied to thumb */
	 .demo-thumb-style {
	     top: 50%;
	     position: absolute;
	     border: 2px solid #222;
	     z-index:10;
	 }

	 /* Thumb positioning in rem (buggy) */
	 .demo-thumb-rem {
	     height: 3.2rem;
	     width: 1.2rem;
	     margin-top: -1.6em;
	     margin-left: -0.6em;
	 }

	 /* x-axis */
	 .demo-bar {
	     position: absolute;
	     height: 2px;
	     width: 100%;
	     top: 50%;
	     margin-top: 1px;
	     background-color: #888;
	 }

JavaScript

$(function() {
	     $( "#draggable-rem" ).draggable({axis: 'x', grid:[20, 0]});
	 });