JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>

CSS

html,body{height:100%}
.container {height:100%;background:#eee;width:100%}
.item {background:#ccc;width:100px;height:100px;position:absolute;top:20px;left:20px}

JavaScript

$(function() {
    $("#item").draggable();
    $("body").mousedown(function(e) {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(e.type, e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget || document.body.parentNode);
        $("#item")[0].dispatchEvent(event);
    });
});