JSFiddle - React, Tailwind, and code Playground

by jenyay

HTML

<h6>Works good:</h6>
<ul class="horList">
    <li>Drag me (left)</li>
    <li>Drag me (right)</li>
    <li class="clear"></li>
</ul>

<h6>Works bad:</h6>
<ul class="horList bad">
    <li>Drag me (right)</li>
    <li>Drag me (left)</li>
    <li class="clear"></li>
</ul>

CSS

body
{ 
    font: 12px arial; 
    padding: 10px 
}
.horList
{
    border: solid 1px black;
    padding: 2px 0 2px 2px;
    margin-bottom: 10px;
    width: 400px
}
.horList li
{
    float: left;
    width: 192px;
    color: green;
    padding: 2px;
    margin-right: 2px;
    border: solid 1px red
}
.horList.bad li
{
    float: right;
}
.horList li.clear
{
    clear: both;
    float: none;
    line-height: 0;
    border: 0;
    padding: 0
}
.horList li.placeholder
{
    border-style: dashed
}

JavaScript

$('.horList').sortable({
    axis: 'x',
    cursor: 'move',
    forcePlaceholderSize: true,
    scroll: true,
    opacity: 0.3,
    tolerance: 'pointer',
    items: '>li:not(".clearFix")',
    placeholder: 'placeholder'
});