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>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/000craig_costume.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals1.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals2.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals3.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/sam_as_pooh.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/Samuel_arealsmile.jpg" />
    </li>
</ul>
<div>
    <h1>Steps to reproduce:</h1>
    <ol>
        <li><em>The list of images should scroll off the bottom of your browser window.</em> If
            for some reason it doesn't, shorten your browser window so it does. Also, <em>this text box should be shorter than the image list</em>.
            If it is larger, shrink your text size.</li>
        <li>Now, scroll the page to the bottom of the list. Try sorting the list by
            dragging one of the final few elements. Immediately upon starting the drag,
            you will see a screen jump (and if you're using Firefox, a "flash" or refresh).</li>
        <li>After dropping this element, without scrolling the page, try dragging
            it, or another element close by. You will see another jump (and flash).</li>
        <li>If you scroll the page up, so that the list's final element is not visible,
            and try dragging elements that *are* visible, the jump & flash <em>do not</em> occur.</li>
</div>

CSS

body {
    background-color: #012840;
}
ul {
    list-style: none;
    width: 400px;
    color: #336633;
    background-color: #ffffff;
    padding: 15px;
    float: left;
}
div {
    width: 400px;
    background-color: #87A646;
    color: #000;
    padding: 20px;
    float: left;
}

JavaScript

$( "ul" ).sortable();