JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="header">Selected DVDs</div>
    <ul id="gallery" class="dvdlist">
        <li>DVD 1</li>
        <li>DVD 2</li>
        <li>DVD 3</li>
    </ul>
</div>
<div class="container">
    <div class="header">Un-selected DVDs</div>
    <ul id="trash" class="dvdlist">
        <li>DVD 4</li>
        <li>DVD 5</li>
        <li>DVD 6</li>
    </ul>
</div>

CSS

.container {
    margin:5px 5px 20px 5px;
    padding:5px;
    border:1px solid #000;
}
.header {
    margin:5px;
    padding:5px;
    background-color:#666;
    color:#FFF;
}
.dvdlist li {
    display:inline-block;
    width:50px;
    height:50px;
    border:1px solid #000;
    cursor:move;
}

JavaScript

$("#gallery").sortable({
    connectWith: "#trash"
});
$("#trash").sortable({
    connectWith: "#gallery"
});