JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

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


<div id="sortable"></div>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

#sortable {
    width: 100px;
    height: 500px;
    border: 1px solid red;
}

.box {
    height: 100px;
    width: 100px;
    background: blue;
    display: inline-block;
    margin: 5px;
}

JavaScript

$( ".box" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone"
});

$( "#sortable" ).sortable();