JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<div class="o">
  <ul class="categories">
    <li class="category" data-id-cat="1" data-parent="cat">
      <div class="cat-header first-level">Cat 1<span class="ui-icon ui-icon-closethick"></span></div>
      <ul class="items second-level">
        <li class="item first-level" data-id-cat="2" data-parent="1">Item 1<span class="ui-icon ui-icon-closethick"></span></li>
        <li class="item first-level" data-id-cat="3" data-parent="1">Item 2<span class="ui-icon ui-icon-closethick"></span></li>
        <li class="item first-level" data-id-cat="4" data-parent="1">Item 3<span class="ui-icon ui-icon-closethick"></span></li>
      </ul>
    </li>
    <li class="category" data-id-cat="5" data-parent="cat">
      <div class="cat-header first-level">Cat 2<span class="ui-icon ui-icon-closethick"></span></div>
      <ul class="items second-level"></ul>
    </li>
    <li class="category" data-id-cat="6" data-parent="cat">
      <div class="cat-header first-level">Cat 3<span class="ui-icon ui-icon-closethick"></span></div>
      <ul class="items second-level"></ul>
    </li>
    <li class="category" data-id-cat="7" data-parent="cat">
      <div class="cat-header first-level">Cat 4<span class="ui-icon ui-icon-closethick"></span></div>
      <ul class="items second-level">
        <li class="item first-level" data-id-cat="8" data-parent="subcat">Item 4<span class="ui-icon ui-icon-closethick"></span></li>
      </ul>
  </ul>
</div>

CSS

.categories,
.items {
  list-style: none outside none;
  margin-bottom: 20px;
  padding: 0;
  width: 480;
}

.categories .ui-icon,
.items .ui-icons {
  float: right;
  margin: 12px 0 0 10px;
  cursor: auto;
}

.first-level {
  background: red;
}

.second-level {
  background: black;
}

.cat-header,
.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;
}

JavaScript

$(function() {
  $(".categories").sortable({
    placeholder: "placeholder",
    handle: ".cat-header"
  });
  $(".items").sortable({
    connectWith: ".items",
    placeholder: "placeholder"
  });
  $(".ui-sortable .ui-icon").click(function(e) {
    var t = $(this).parent();
    var s = t.parent();
    var r = confirm("Are you shure you want to remove " + t.text().trim() + "?");
    if (r) {
      t.remove();
      s.sortable("refresh");
    }
  });
  });