JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <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>
</body>
</html>

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;
}
.placeholder {
    float: left;
	background-color: #d0ff00;
}

JavaScript

$(document).ready(function(){
    console.log($(".connectable_list1"));
    $(".connectable_list1").sortable({
        cursor: "move",
        //distance: 1,
        revert: 100,
        scroll: true,
        tolerance: "pointer",
        opacity: 0.6,
        placeholder: "placeholder",
        forcePlaceholderSize: true
    }).disableSelection();
    $(".connectable_list2").sortable({
        cursor: "move",
        //distance: 1,
        revert: 100,
        scroll: true,
        tolerance: "pointer",
        opacity: 0.6,
        placeholder: "placeholder",
        forcePlaceholderSize: true
    }).disableSelection();
});