JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
    EXCLUDE
    <ul id="exclude" class="connectedSortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

<div class="container">
    INCLUDE
    <ul id="include" class="connectedSortable">
    </ul>
</div>

CSS

.container {
    float: left;
    margin-right: 20px;
}

.connectedSortable {
    width: 200px;
    height: 200px;
    padding: 0;
    background: #EEE;
    border: dashed 1px #CCC;
    list-style: none;
    overflow-y: auto;
}

.connectedSortable li {
    margin: 5px;
    padding: 5px;
    background: #CCC;
    border: 1px solid #AAA;
    text-align: center;
}

JavaScript

$("#exclude, #include").sortable({
    connectWith: ".connectedSortable",
    distance: 10
}).disableSelection();

var moveToInclude = function() {
    $(this).appendTo("#include").click(moveToExclude);
}

var moveToExclude = function() {
    $(this).appendTo("#exclude").click(moveToInclude);
}

$("#exclude li").click(moveToInclude);

$("#include li").click(moveToExclude);