JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

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

CSS

html, body {
    min-height:100%;
}

body {
    overflow-y:scroll;
}

div.containment {
    width:200px;
    height:200px;
    border:1px solid black;
    top:-20px;
    left:-20px;
}

div.draggable {
    width:100px;
    height:100px;
    background:red;
}

JavaScript

$('.containment').each(function(index, value){
    var containment = $(value),
        draggable = containment.find('.draggable');
    draggable.draggable({
        containment : containment
    });
});