JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<ul class="connectable_list1 connectedSortable">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
<ul class="connectable_list2 connectedSortable">
    <li>Item B</li>
    <li>Item B</li>
    <li>Item B</li>
    <li>Item B</li>
</ul>

CSS

ul {
    float:left;
    width:200px;
}
.connectable_list1 {
    background:blue;
}
.connectable_list2 {
    background:red;
}
li {
    float:left;
    width:50px;
    height:50px;
    margin:10px;
    background:#ff99cc;
}

JavaScript

$(".connectable_list1").sortable({
    connectWith: '.connectedSortable'
});
$(".connectable_list2").sortable({
    connectWith: '.connectedSortable',
});