JSFiddle - React, Tailwind, and code Playground

by shhQuiet

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<p>
Resize until there is a horizontal scroll bar.  Scroll to the far right and then try dragging items up and down.  The horizontal position of the dragging element is still set to the original position.  If you try scrolling items in the far right-most container, the dragging item is off screen to the right. :(
</p>
<p>
<div id="scroller">
<div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>
<div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>
<div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>
<div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>
<div class="items">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
</div>
</div>
</p>

CSS

.item {
    border: 1px #aaa solid;
    width: 2in;
}

.items {
    height: 100%;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
}

#scroller {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

JavaScript

$('.items').sortable({
    axis: 'y',
    containment: 'parent'
});