JSFiddle - React, Tailwind, and code Playground

by halm

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div class="listDiv">
    <ul id="list1" class="connected ui-sortable">
        <li id="a">a</li>
        <li id="b">b</li>
        <li id="c">c</li>
        <li id="d">d</li>
        <li id="e">e</li>
        <li id="f">f</li>
        <li id="g">g</li>
        <li id="h">h</li>
        <li id="i">i</li>
        <li id="j">j</li>
    </ul>
</div>
<div class="listDiv">
    <ul id="list1" class="connected ui-sortable">
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
        <li id="6">6</li>
        <li id="7">7</li>
        <li id="8">8</li>
        <li id="9">9</li>
        <li id="10">10</li>
    </ul>
</div>

CSS

.listDiv {
    overflow:auto; 
    float: left; 
    width:400px;
    border: 1px solid #999;
}

#list1, #list2 {
    list-style-type: none;
    height: 200px;
}

#list1 li, #list2 li {
font-size: 11px;
margin: 0 5px 5px;
padding: 5px;
width: 300px;
border: 1px solid #C5DBEC;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
outline: medium none;
}

JavaScript

$(function() {
   $( "#list1, #list2" ).sortable({
        connectWith: ".connected"
    }).disableSelection();
});