JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div id="lol">
<ul id="main" class="clearfix">
    <li><label>file 1</label></li>
    <li><label>file 2</label></li>
    <li><label>blaat.jpg</label></li>
    <li><label>lol.omg</label></li>
    <li class="collection"><label>mapke</label></li>
</ul>   
   

<ul id="next" style="display: none;">
    <li class="collection"><label>mapke</label></li>
    <li class="collection"><label>mapke</label></li>
    <li class="collection"><label>mapke</label></li>
    <li><label>halo</label></li>
    <li><label>COD</label></li>    
</ul>   
   
</div>

CSS

.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

#main {
    clear: both;
    background-color: #eee;
}

li { 
  display: block;
  float: left;
  width: 100px;
  height: 180px; 
  position: relative;
  background: transparent url(http://icons.iconarchive.com/icons/gakuseisean/radium/256/file-icon.png) 0 50% no-repeat;
  background-size: contain;
  margin: 20px 2px;
    padding: 0px 20px;
}

li.over {
    background-color: #aaaaaa;
}

li.collection {
    background-image: url(http://www.veryicon.com/icon/png/System/Vista%20Artistic/Folder.png);
}

.ui-selected {
  background-color: #8888ff;
}
.ui-selecting {
  background-color: #8888dd;
}


  li label {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    background: #000;
    color: #fff
  }

li.drop { background-color: #4444FF }
.draglist {
    
}

    .draglist li:nth-child(n) {
        position: absolute !important;
        display: none !important;
    }

    .draglist li:nth-child(1) {
        display: block !important;
        left: 0;
        top: 0;
        z-index: 995;
    }
    .draglist li:nth-child(2) {
        display: block !important;
        left: 10px;
        top: 10px;
        z-index: 990;
    }
    .draglist li:nth-child(3) {
        display: block !important;
        left: 20px;
        top: 20px;
        z-index: 985;
    }
    .draglist li:nth-child(4) {
        display: block !important;
        left: 30px;
        top: 30px;
        z-index: 980;
    }
    .draglist li:nth-child(5) {
        display: block !important;
        left: 40px;
        top: 40px;
        z-index: 980;
    }

.placeholder {
    z-index: 99;
    width: 10px;
    margin: inherit -5px;
    padding: 0;
    background: #dddddd;
}

.placeholder.over {
 width: 100px;
}

JavaScript

$(function() {
  init_sort();
  console.log('start');
});

function init_sort() {
    create_draggable();
    create_selectable_watcher();
}

function open_folder() {
    $('#main').html(($('#next').html()));
    init_sort();
}
    
    
function create_selectable() {
    var list = $('#main');
    list.selectable({
        stop: function () {
            create_draggable();
            
            list.click(function (e) {
                if (e.target.tagName == 'UL') {
                    list.unbind('click');
                    create_selectable();
                    destroy_draggable();
                    list.find('.ui-selected').removeClass('ui-selected');
                }
            });
        }
    });   
}

function destroy_selectable() {
    var list = $('#main');
    list.selectable('destroy');
}

function create_draggable() {
    var list = $('#main');
    list.find('li').draggable({
        cursorAt: {
            left: 0,
            top: 0
        },
        helper: function () {
            $(this).addClass('ui-selected');
            var item = $('<ul class="draglist"></ul>');
            list.find('li.ui-selected').each(function (idx, el) {
                $(el).addClass('original')
                item.append($(el).clone().removeClass('original'));
            });
            
            list.find('li.original').hide();
            
            return item;
        }, 
        start: function () {
            list.find('li:visible').each(function (idx, el) {
                $(el).after('<li class="placeholder"></li>');
            });
            
            list.find('li.collection, li.placeholder').droppable({
                over: function () {
                    $(this).addClass('over');
                },
                out: function () {
                    $(this).removeClass('over');
                },
                drop: function (event, ui) {
                    console.log('drop');
                    var receiver =...