JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>
<div id="container">
    <div id="draggable" class="draggie">1</div>
    <div id="draggable2" class="draggie" style="width: 200px; height: 50px; line-height: 50px;">2</div>
</div>

CSS

body {
    padding: 2em;
}
#container {
    position: relative;
    border: 2px solid #ddd;
    width: 500px;
    height: 500px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACIklEQVR4Xu3cMYrDUBAEUesAuv8VlQvFu0doaOhCiHI6/BlcD7PZHtd1/f0+8DnP8wPf4vc7BHmXoyDv8vAX8jIPQQQZFfCP+ihsu1aQttzonSCjsO1aQdpyo3eCjMK2awVpy43eCTIK264VpC03eifIKGy7VpC23OidIKOw7VpB2nKjd4KMwrZrBWnLjd4JMgrbrhWkLTd6J8gobLtWkLbc6J0go7DtWkHacqN3gozCtmsFacuN3gkyCtuuFaQtN3onyChsu1aQttzonSCjsO1aQdpyo3eCjMK2awVpy43eCTIK264VpC03eifIKGy7VpC23OidIKOw7VpB2nKjd4KMwrZrBWnLjd4JMgrbrhWkLTd6J8gobLtWkLbc6J0go7DtWkHacqN3nwF5nucT/1Huvu8RNbv2EIQNnq4JkgrBc0Hg4OmcIKkQPBcEDp7OCZIKwXNB4ODpnCCpEDwXBA6ezgmSCsFzQeDg6ZwgqRA8FwQOns4JkgrBc0Hg4OmcIKkQPBcEDp7OCZIKwXNB4ODpnCCpEDwXBA6ezgmSCsFzQeDg6ZwgqRA8FwQOns4JkgrBc0Hg4OmcIKkQPBcEDp7OCZIKwXNB4ODpnCCpEDwXBA6ezgmSCsFzQeDg6ZwgqRA8FwQOns4JkgrBc0Hg4OmcIKkQPBcEDp7OCZIKwXNB4ODpnCCpEDwXBA6ezgmSCsFzQeDg6ZwgqRA8FwQOns79A8HeEZ0VsNRYAAAAAElFTkSuQmCC');
}
.draggie {
    width: 100px;
    height: 100px;
    background: #FA0;
    border-radius: 10px;
    z-index: 1;
    cursor: all-scroll;
        
    line-height: 100px;
    text-align: center;
    font-size: 18px;
}
.is-dragging {
    background: red;
}

JavaScript

// See http://draggabilly.desandro.com/
// Background Grid created using http://www.neatgrid.com/

var elem = document.querySelector('#draggable');
var draggie = new Draggabilly(elem, {
    containment: '#container',
    grid: [50, 50]
});

var elem2 = document.querySelector('#draggable2');
var draggie2 = new Draggabilly(elem2, {
    containment: '#container',
    grid: [50, 50]
});