JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/7065">jQuery UI #7065</a> - Connected sortables do not interact well with <code>overflow: scroll</code>.  To recreate, scroll down in the left container and attempt drag an item from the right container into the left.</p>

<div class="sortable-left-container">
<div class="sortable-list-container">    
<ul id="sortable-left" class='sortable-movievideos'>
    <li class="ui-state-default" style="background:red">Item 1</li>
    <li class="ui-state-default" style="background:blue">Item 2</li>
    <li class="ui-state-default" style="background:yellow">Item 3</li>
    <li class="ui-state-default" style="background:cyan">Item 4</li>
    <li class="ui-state-default" style="background:brown">Item 5</li>
    <li class="ui-state-default" style="background:orange">Item 6</li>
    <li class="ui-state-default" style="background:grey">Item 7</li>
    <li class="ui-state-default" style="background:green">Item 8</li>
    <li class="ui-state-default" style="background:AliceBlue">Item 9</li>
    <li class="ui-state-default" style="background:AntiqueWhite">Item 10</li>
    <li class="ui-state-default" style="background:Azure">Item 11</li>
    <li class="ui-state-default" style="background:Beige">Item 12</li>
    <li class="ui-state-default" style="background:Bisque">Item 13</li>
    <li class="ui-state-default" style="background:Black">Item 14</li>
    <li class="ui-state-default" style="background:BlanchedAlmond">Item 15</li>
    <li class="ui-state-default" style="background:BlueViolet">Item 16</li>
    <li class="ui-state-default" style="background:BurlyWood">Item 17</li>
    <li class="ui-state-default" style="background:CadetBlue">Item 18</li>
    <li class="ui-state-default" style="background:Chocolate">Item...

CSS

body { padding: 20px; }
p { line-height: 1.5; margin-bottom: 20px; }

div.sortable-left-container, div.sortable-right-container {
    height: 335px;
    margin-top: 5px;
    overflow-y: scroll;
    width: 75px;
    float: left;
}
div.sortable-left-container li, div.sortable-right-container li {
    cursor: pointer;
    height: 50px;
    list-style-type: none;
    margin: 5px;
    width: 50px;
    float: left;
}
ul {
    height: 400px;
}

JavaScript

jQuery(document).ready(function() {
    jQuery(".sortable-movievideos").sortable({
        connectWith: '.sortable-movievideos',
    });
});