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>

<ul class="drag">
    <li>first, drag me then don't drop me on sortable items</li>
</ul>
<br/>
<br/>
<ul class="sort">
    <li>then, sort me when revert is in action</li>
    <li>sortable 2</li>
    <li>sortable 3</li>
    <li>sortable 4</li>
</ul>

CSS

.ph {
    background-color: green;
    height: 20px;
}

JavaScript

$(".drag").draggable({
    revert: "invalid",
    revertDuration: 10000,
    connectToSortable: ".sort"
});

$(".sort").sortable({
    placeholder: "ph"
});