JSFiddle - React, Tailwind, and code Playground

HTML

<div class='sequencer'>
    <ul id='sortableList'>
        <li>
            <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage1</li>
        <li>
            <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage2</li>
        <li>
            <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage3</li>
        <li>
            <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage4</li>
        <li>
            <img src='http://images.wikia.com/reddithistory/images/1/10/3-rage-face.png' />rage5</li>
    </ul>
</div>

CSS

.sequencer {
     height:110px;
     width:600px;
     overflow-y:hidden;
     overflow-x:hidden;
 }
 .sequencer ul {
     white-space: nowrap;
     overflow-x:scroll;
     overflow-y:hidden;
 }
 .sequencer li {
     display:inline-block;
     padding-right:10px;
     padding-left:10px;
     text-align:center;
 }
 .sequencer img {
     display:block;
     height:50px;
 }
 .placeholder {
     background: #f3f3f3;
     visibility: visible;
 }

JavaScript

$('#sortableList').sortable({
    refreshPositions: true,
    opacity: 0.6,
    scroll: true,
    containment: 'parent',
    placeholder: 'placeholder',
    tolerance: 'pointer',
    forcePlaceholderSize:true
}).disableSelection();