JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<script src="https://rawgit.com/RubaXa/Sortable/0.5.2/Sortable.min.js"></script>
<div id="container">
    <div class="box"><div class="handle">+</div> 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus. <span class="other filter"><span class="layer">XXX</span></span></div>
    <div class="box"><div class="handle">+</div>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus.</div>
    <div class="box"><div class="handle">+</div>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus.</div>
    <div class="box"><div class="handle">+</div>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus.</div>
    <div class="box"><div class="handle">+</div>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus.</div>
</div>

CSS

#container {
    width: 600px;
    height: 600px;
    border: 1px solid black;
}

.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: inline-block;
}

JavaScript

var s = new Sortable(document.getElementById('container'), {
    draggable: '.box',
    filter: '.filter',
    handle: '.handle' // remove this to allow the entire box to be dragged but leave anything with .filter alone: you can still select "XXX" in box 1 if this is removed
});