JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div id="lol">
<ul id="main">
    <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

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

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

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

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

JavaScript

$(function() {
  init_sort();
});

function init_sort() {
      var list = $('#main');
    
    list.sortable({
        helper: function (evt, ui) {
            return $(ui).clone().appendTo('#lol');
        },
        receive: function (evt, ui) {
            console.log('RECEIVE', ui);
        }
    });
    
    list.find('li.collection').droppable({
        over: function (e, u) {
            e.stopPropagation();
            e.preventDefault();
            
            $(this).addClass('drop');
            window.bla = window.setTimeout(function () {
                open_folder();
            }, 1000);
        },
        out: function (e, u) {
            $(this).removeClass('drop');
            window.clearTimeout(window.bla);
        }
    });
}

function open_folder() {
    $('#main').html(($('#next').html()));
    init_sort();
}