JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

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

<p><a href="http://bugs.jqueryui.com/ticket/9325">jQuery UI #9325</a>: The <code>helper</code> option does not account for <code>margin</code> on the <code>draggable</code> for its positioning.</p>

<div id="draggable">Hello World</div>

CSS

#draggable {
    background: black;
    color: red;
    width: 100px;
    height: 100px;

    /* This causes the bug! */
    margin-left: 200px;
}

JavaScript

$( "#draggable" ).draggable({
    helper: "clone"
    
    // This will workaround the issue.
    // cursorAt: { left: 0 }
});