JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div style="position: fixed; border: 1px solid black; background-color: red; width: 50px; height: 100px; right: 0; bottom: 50px;">
    <div style="position: absolute; margin: 1px; background-color: blue; width: 40px; height: 40px;" class="draggable"></div>
    <div style="position: absolute; top: 42px; margin: 1px; background-color: green; width: 40px; height: 40px;" class="draggable2"></div>
</div>

CSS

body {
    height: 1000px;
    overflow: scroll;
}

JavaScript

$('.draggable').draggable({
    helper: 'clone',
    containment: 'document',
    revert: 'invalid'
});

$('.draggable2').draggable({
    helper: 'clone',
    containment: 'document',
    revert: 'invalid'
});