JSFiddle - React, Tailwind, and code Playground

by Patrick

HTML

<ul class='item'>
<li>./code<ul class='arg'>
    <li>file1.jpg</li>
    <li>file2.jpg</li>
    </ul></li>
<li>./images<ul class='arg'>
    <li>file3.jpg</li>
    <li>file4.jpg</li>
    </ul></li>
<li class='hidden newfolder'>./new folder<ul class='arg'>
    </ul></li>    
</ul>

CSS

.arg {
    min-height: 4px;
}
.hidden {
    display: none;
}
.placeholder {
    background-color: #ccc;
    height: 20px;
    width: 100px;
}

JavaScript

$(function() {
    $('.arg').sortable({
        connectWith: '.arg',
        placeholder: 'placeholder',
        start: function() {
            $('.newfolder').removeClass( 'hidden' );
        },
        stop: function() {
            $('.newfolder').addClass( 'hidden' );
        }
    });
});