JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
Position X: <input id="posx" type="text" value="0">
<div class="draggable_wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

CSS

.draggable_wrapper{
    width:300px;
    height: 100px;
    border: black 1px solid;
    margin-top:100px; margin-left:100px;
    overflow: visible;
    position: relative;
}
ul{display: block; white-space: nowrap;}
ul li{
    display: inline-block;
    width:30px;
    height: 70px;
    margin:10px 10px 0 0;
    border: 1px solid red;
}

JavaScript

var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
    distance: 3,
    axis: "x",
    revert: false,
    scroll: false,
    containment: [
        wrapperOffset.left - 55,
        wrapperOffset.top,
        wrapperOffset.left,
        wrapperOffset.top
    ],
    drag: function(e) {
        $('#posx').val($(this).position().left);
    }
});