JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul class="list">
    <li>One</li>
    <li>Two</li>
</ul>
<ul class="list" style="display: none;">
    <li>Three</li>
    <li>Four</li>
</ul>
<ul class="list">
    <li>Five</li>
    <li>Six</li>
</ul>

CSS

/* There are 3 lists here and the middle one is hidden.
You can drag from the top to the bottom list but you cannot
do the reverse.

What's happening is that it's actually placing the items into
the hidden second list.

What's REALLY odd about this is that if you remove the width
on the li the problem is not present.  I would love an
explanation for this one. */

.list {
    border: 2px solid black;
}
.list li {
    height: 30px;
    width: 200px; /* Removing this fixes this o_O ? */
}

JavaScript

$( ".list" ).sortable({
    connectWith: ".list"
});

// These have no effect
// $( ".list" ).sortable( "refresh" );
// $( ".list" ).sortable( "refreshPositions" );