JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul id="sortable1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul id="sortable2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

.ui-sortable {
    list-style: none;
    padding: 0;
}
.ui-sortable li {
    border: 1px solid black;
}
.ui-state-highlight {
    height: 1.2em;
}

#sortable1 .ui-state-highlight {
    background: red;
}
#sortable2 .ui-state-highlight {
    background: green;
}

JavaScript

$( "ul" ).sortable({
    placeholder: "ui-state-highlight"
});