JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul id="example1">
  <li>
  <div class="panel-drop">
    <span class="dropper"> &#9776;</span>
    <div class="panel-setting">item for Drop</div>
    </div>
    <ul></ul>
  </li>
</ul>


<div id="example5">
  <ul>
    <li>
     <div class="panel-drop">
      <span class="dropper">&#9776;</span>
      <div class="panel-setting">Item 2</div>
      </div>
      <ul></ul>
      <ul>
        <li>
         <div class="panel-drop">
          <span class="dropper">&#9776;</span>
          <div class="panel-setting">Item 1 1</div>
          </div>
          <ul></ul>
        </li>
        <li>
         <div class="panel-drop">
          <span class="dropper">&#9776;</span>
          <div class="panel-setting">Item 1 2</div>
          </div>
          <ul></ul>
        </li>
        <li>
         <div class="panel-drop">
          <span class="dropper">&#9776;</span>
          <div class="panel-setting">Item 1 3</div>
          </div>
          <ul></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

ul#example1 {
    background-color: #b3acac;
}

li {
    background-color: #fff;
}
.panel-drop {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  background: #eee;
  border: 1px solid #eee;

}

.panel-setting {
  padding: 0 0 0 20px;
}

ul {
  min-height: 20px;
  clear: both;
  border: 2px dashed #514d4d;
  margin: 10px;
  padding: 10px 10px 0 10px;
}

li {
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

span.dropper {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  border: 1px solid #bdbdbd;
  font-size: 34px;
  text-align: center;
  background-color: #eee;
  cursor: move;
}

li.ui-draggable {
    width: auto!important;
}

JavaScript

var sor = $("#example5 ul").sortable({
   connectWith: "#example5 ul",
   placeholder: "ui-state-highlight",
   stop: function(e, ui) {
     rer()
   }
 });


 $("#example1 li").draggable({
   helper: "clone",
   connectToSortable: "#example5 ul",
   cursor: "crosshair",
   handle: ".dropper",
   opacity: 0.9,
   stop: function(e, ui) {
     s_refresh(e, ui)

   }
 });

 function s_refresh(e, ui) {
   var $i = $("#example5 ul li").length,
     $target = $(ui.helper);
   $target.attr('class', 'ui-sortable-handle').removeAttr('style')
   $target.find('.panel-setting').html('ITEM ' + $i);
   $target.find('.dropper').removeClass('ui-draggable-handle');
   sor.sortable('refresh');
   sor.sortable('refreshPositions')
 }

 function rer() {
   sor.disableSelection();
   sor.sortable('refresh');
 }