JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<div class="cat-list" id="catListParent">
<ul id="catList" class="main">

	<li class="deed_category cat-_MAIN active hasSentDeeds hasHistoryDeeds" style="" id="_MAIN" data-id="_MAIN" data-color="#b4b4bf">
	  <span style="border-color: rgb(180, 180, 191);">Home</span>
	  <ul></ul>
	</li>

	<li class="deed_category cat-6001 hasHistoryDeeds" style="" id="6001" data-id="6001" data-color="#000000">
	  <span style="border-color: rgb(0, 0, 0);">Rstar</span>
	  <ul></ul>
	</li>

	<li class="deed_category cat-44001 hasHistoryDeeds" style="" id="44001" data-id="44001" data-color="#000000">
	  <span style="border-color: rgb(0, 0, 0);">ZINE</span>
	  <ul></ul>
	</li>

	<li class="deed_category cat-4083001" style="" id="4083001" data-id="4083001" data-color="#00008b">
	  <span style="border-color: rgb(0, 0, 139);">Wave</span>

	  <ul></ul>
	</li>

	<li class="deed_category cat-3001 hasSentDeeds hasHistoryDeeds hasChildren" style="" id="3001" data-id="3001" data-color="#b7de1b">
	  <span style="border-color: rgb(183, 222, 27);">Deed</span>

	  <ul>
		   <li style="" id="5057001" data-id="5057001" class="deed_category cat-5057001" data-color="#b7de1b">
			  <span style="border-color: rgb(183, 222, 27);">Plugin</span>
			</li>
	  
		   <li style="" id="5037001" data-id="5037001" class="deed_category cat-5037001 hasHistoryDeeds" data-color="#b7de1b">
			  <span style="border-color: rgb(183, 222, 27);">Now</span>
			</li>
	  
		   <li style="" id="5047001" data-id="5047001" class="deed_category cat-5047001" data-color="#b7de1b">
			  <span style="border-color: rgb(183, 222, 27);">Future</span>
			</li>
	  
		   <li style="" id="5067001" data-id="5067001" class="deed_category cat-5067001" data-color="#b7de1b">
			  <span style="border-color: rgb(183, 222, 27);">Stuff</span>
			</li>
	  
		   <li style="" id="5047002" data-id="5047002" class="deed_category cat-5047002" data-color="#b7de1b">
			  <span style="border-color: rgb(183, 222, 27);">General</span>
			</li>
	 ...

CSS

* {padding:0;margin:0;}
ul {margin-left:20px;list-style-type:none;position:relative;}
.cat-list {float:left;width:200px;}
#deedsContainer {float:left;width:500px;}
li {border:solid 1px #ccc;padding:3px;}
li ul {margin-top:10px;display:none;}
.ui-sortable-placeholder {background:red;}
/*#catList.sorting ul {display:block;}*/
#catList.sorting > li {padding-top:0;padding-bottom:0;margin-top:-1px;}
#catList .hasChildren ul {display:block;}
li.waiting_cat {background-color:#efefef;}
li.accept_cat {background-color:yellow;padding-top:3px;padding-bottom:3px;}
li.placeholder {height:8px;width:100%;padding:0;border:none;background: #B7DDFF;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;     
}
li.placeholder.accept_cat {height:30px;position:relative;}
li.ui-draggable-dragging {z-index:10000;background:#FFD600;opacity:0.8}
li.ui-draggable-dragging ul {display:none !important;}

JavaScript

$(document).ready(function(){
    $('#catListParent li')    
      .draggable({
        start: function(a,b){
            console.log(b.helper);
            $('#catList').addClass('sorting').children('li').each(function(){
                $(this).after('<li class="placeholder"></li>');
                unitDroppable();
            })
        },
        //helper: 'clone',
        //cursorAt: { left: 3, top: 0 },
        tolerance: 'pointer',
        revert: function(is_valid_drop){
            if(!is_valid_drop) {
                dropCleanUp();
                return true;
            }
        }          
      })
    $('#catList').on('drop','.placeholder',function(e,ui){
        $(this).replaceWith(ui.helper.removeAttr('style'));
        dropCleanUp();
    }).on('drop','.deed_category',function(e,ui){
        var li = $(this);
        li.find('ul').show().append(ui.helper.removeAttr('style'));
        dropCleanUp();
    })

})

function dropCleanUp(){
        $('#catList').removeClass('sorting').children('.placeholder').each(function(){
            var li = $(this),
                e = li.html() == '';
            if (e) li.remove();
         })    
}

function unitDroppable(){
    $('#catList')
       .children('li:not(.placeholder)')
       .droppable({
           accept: '.deed_category:not(.hasChildren)',
           activeClass: 'waiting_cat',
           hoverClass: 'accept_cat',
           out: function(){},
           over:function(){}           
       })
       .end()
       .children('li.placeholder')
       .droppable({
           accept: '.deed_category',
           activeClass: 'waiting_cat',
           hoverClass: 'accept_cat',
           out: function(){},
           over:function(){}           
       })      
}