JSFiddle - React, Tailwind, and code Playground

by therealklanni

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="sortMe">
    <div id="favorite_19394" class="sortable-button sortable-sortable">
        <a href="javascript://">sortable 1</a>
        <span class="destroy"></span>
    </div>
    <div id="favorite_19393" class="sortable-button sortable-sortable">
        <a href="javascript://">sortable 2</a>
        <span class="destroy"></span>
    </div>
    <div id="favorite_12553" class="sortable-button sortable-sortable">
        <a href="javascript://">sortable 6</a>
        <span class="destroy"></span>
    </div>
    <div id="favorite_19392" class="sortable-button sortable-sortable">
        <a href="javascript://">sortable 8</a>
        <span class="destroy"></span>
    </div>
    <div id="favorite_19391" class="sortable-button sortable-sortable">
        <a href="javascript://">sortable Four</a>
        <span class="destroy"></span>
    </div>
</div>

CSS

.sortable-button a {
    border: solid black 1px;
    padding: 2px;
}

.sortable-sortable {
    float: left;
}

.sortable-drop-placeholder {
    float: left;
    width: 150px;
    height: 22px;
    border: dotted yellow 1px;
}

JavaScript

$('#sortMe').sortable({
    items: 'div',
    revert: true,
    // axis: 'x',
    placeholder: 'sortable-drop-placeholder',
    tolerance: 'pointer'
});