JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<div class="o">
<ul class="items">
    <li class="item first-level" data-id-cat="1" id="cat1">Cat1  <span data-id-cat="1" class="deletecategorie">delete</span></li>
    <li class="item second-level"  data-id-cats="1" data-id-sub-cat="2" id="subcat1">Sub cat 1 <span class="deletecategorie">delete</span></li>
    <li class="item second-level"  data-id-cats="1" data-id-sub-cat="3" id="subcat2">Sub cat 2<span class="deletecategorie">delete</span></li>
       <li class="item second-level" data-id-cats="1" data-id-sub-cat="4" id="cat2">Sub cat 3 <span class="deletecategorie">delete</span></li>
     <li class="item first-level" data-id-cat="2"  id="cat2">cat 3 <span data-id-cat="2"  class="deletecategorie">delete</span></li>
     <li class="item first-level" data-id-cats="4" data-id-sub-cat="5"  id="cat2">cat 32 <span class="deletecategorie">delete</span></li>
</ul>
</div>

CSS

.items {
    list-style: none outside none;
    margin-bottom: 20px;
    padding: 0;
    width:480;
}
.first-level{
  background:red;
}
.second-level{
  background:black;
}
.item {
    background: #fff;
    border: 1px solid #ddd;
    cursor: move;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    width: 480px;
}
.second-level {
    margin-left: 20px;
    width: 460px;
}
.dragHover {
    border-color: blue;
    color: blue;
}
.placeholder {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 500px;
}
span.deletecategorie {
    z-index: 999;
    cursor: pointer;
}
.placeholder-sub {
    background: #fff;
    border: 1px dashed #ccc;
    height: 50px;
	width: 480px;
    margin-left: 20px;
}

JavaScript

var arrfiltercat = new Array();
$(document).on("click", ".deletecategorie", function() {

  var parent=$(this).parent('li');
    var idcategoryparent=$(this).attr("data-id-cat");

  if (parent.is(".first-level"))
  {
       parent.each(function () {
 
            $(`[ data-id-cats*=${idcategoryparent}]`).addClass('first-level').removeClass('second-level');
   
parent.remove();
  
        });
         $(`[ data-id-cats*=${idcategoryparent}]`).each(function(index, item) {
  arrfiltercat.push(   $(this).attr("data-id-sub-cat"));
});
        }
        console.log(idcategoryparent);

  console.log(arrfiltercat);
});


$(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder",
    update: function(event, ui) {
                 var data = Array();

            $(".items li").each(function(i, v){
                data[i] = Array();
                    var id = $(this).attr('data-id-cat');
                    var parent = $(this).attr('data-parent');
                    data[i] = id+parent;
                }); 
                
                //console.log(data);
           
	},
    start: function(event, ui) {
        if(ui.helper.hasClass('second-level')){
            ui.placeholder.removeClass('placeholder');
            ui.placeholder.addClass('placeholder-sub');
        }
        else{ 
            ui.placeholder.removeClass('placeholder-sub');
            ui.placeholder.addClass('placeholder');
        }
    },
     receive: function(event, ui) {
    var basketID = event.target.id;
    var itemID = ui.item[0].id;

    //console.log("itemID: " + itemID + " go to basketID: " + basketID);

    var data = $(this).sortable('serialize', {
      attribute: "data-id"
    });
    //console.log(data);
    //do ajax call with data
  },
    stop: function(event,ui){

     if (ui.item.is(".second-level"))
          {
          if(ui.item.prev().data("id-cat")){
           var parent=ui.item.prev().data("id-cat");
                   ...