JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<div id="parent" class="parent">
    <div id="list" class="list">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

CSS

.parent {
    height:64px;
    width:280px;
}
.list {
    background-color:#d0d0d0;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
}
.item {
    background-color:#404040;
    height:40px;
    width:100px;
    margin:4px;
    cursor:pointer;
    display:inline-block;
}
.placeholder {
    background: red;
    height:40px;
    width:20px;
    display:inline-block;
    margin:4px;
}

JavaScript

$(function() {
    $('#list').disableSelection().sortable({
        scroll: true,
        placeholder: "placeholder",
        start: function(event, ui) { ui.placeholder.html('&nbsp;'); },
        //containment:'parent',
        axis: 'x'
    });
})