JSFiddle - React, Tailwind, and code Playground

by gentooboontoo

HTML

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


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

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

CSS

#sortable {
    height: 100px;
    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();