JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div>
<h3>Current Files</h3>
<ul id="current-files">
    <li>File 1</li>
    <li>File 2</li>
    <li>File 3</li>
    <li>File 4</li>
    <li>File 5</li>
    <li>File 6</li>
    <li>File 7</li>
    <li>File 8</li>
    <li>File 9</li>
    <li>File 10</li>
</ul>
</div>
<div>
<h3>Selected Files</h3>
<ul id="selected-files">
    
</ul>
</div>

CSS

ul{
    list-style:none;
    padding:0;
    min-height:12em;
}
li:nth-child(2n){
    background-color:#a6dbed;
}
div{
    float:left;
    margin:10px;
    border:1px solid black;
    min-width:40%;
    
}

JavaScript

$("#current-files").sortable({
    connectWith: "#selected-files"
});
$("#selected-files").sortable();

$("#current-files li").dblclick(function(ev){
    $(this).prependTo("#selected-files");
});