Nested Lists

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>
<div class="top-select-panel">
  <ul id="main-object">
    <li>
      <div class="panel-drop">
        <span class="dropper"> &#9776;</span>
        <div class="panel-setting">
          <span class="panel-name">Новый пункт</span>
          <div class="panel-options">
            <input type="text" class="list-item-title" name="item-name" placeholder="Введите заголовок">
             <input type="text" class="list-item-post" name="item-name" placeholder="">
            <select class="list-item-post-select">
              <option value="">Выберите запись</option>
              <option value="1">Valr 1</option>
              <option value="2">Varel 2</option>
              <option value="3">erVal 3</option>
              <option value="4">Vagl 4</option>
              <option value="5">Vagl 5</option>
              <option value="6">Vabl 6</option>
            </select>
          </div>
        </div>
      </div>
      <ul></ul>
    </li>
  </ul>
</div>

<div class="bottom-select-panel">
<form action="" class="wpp-form-tree">
  <div id="target-object">
    <ul class="main-ul">
    </ul>
  </div>
  <button  type="submit">Сохранить</button>
</form>
</div>

CSS

.top-select-panel {
  position: fixed;
  left: 0;
  background-color: #eee;
  border-bottom: 2px solid #4d4c4c;
  width: 100%;
  right: 0;
  top: 0;
}

.bottom-select-panel {
  margin-top: 150px;
}

.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 0 10px 10px;
  padding: 10px 0px 0 10px;
  box-sizing: border-box;
}

ul#main-object ul {
  display: none;
}

ul#main-object {
  border: none;
  padding: 10px;
}

ul#main-object li {
  background: #fff;
  padding: 10px;
  margin-bottom: 0;
}


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

#target-object .panel-options {
  display: none;
}

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

$(document).on('submit', '.wpp-form-tree', function(e) {
  e.preventDefault();
  console.log($(this).serialize())
})

//активация сортировки
var sor = $("#target-object ul").sortable({
  connectWith: "#target-object ul",
  placeholder: "ui-state-highlight",
  stop: function(e, ui) {
    d_refresh()
  }
});

var $text_name = 'item-name',
  $select_name = 'item-post';

//активация перетамкисания
$("#main-object li").draggable({
  helper: "clone",
  connectToSortable: "#target-object ul",
  cursor: "crosshair",
  handle: ".dropper",
  opacity: 0.9,
  stop: function(e, ui) {
    s_refresh(e, ui)
  }
});

$("ul, li").disableSelection();

//обновление имен
function WppAttrName() {

  $('.main-ul').children('li').each(function(q) {

    var input_q = $(this).find('.list-item-title'),
      select_q = $(this).find('.list-item-post');

    input_q.attr('name', $text_name + '[' + q + ']');
    select_q.attr('name', $select_name + '[' + q + ']');

    $(this).children('ul').children('li').each(function(w) {

      var input_w = $(this).find('.list-item-title'),
        select_w = $(this).find('.list-item-post');

      input_w.attr('name', input_q.attr('name') + '[' + w + ']');
      select_w.attr('name', select_q.attr('name') + '[' + w + ']');

      $(this).children('ul').children('li').each(function(e) {

        var input_e = $(this).find('.list-item-title'),
          select_e = $(this).find('.list-item-post');

        input_e.attr('name', input_w.attr('name') + '[' + e + ']');
        select_e.attr('name', select_w.attr('name') + '[' + e + ']');

        $(this).children('ul').children('li').each(function(r) {

          var input_r = $(this).find('.list-item-title'),
            select_r = $(this).find('.list-item-post');

          input_r.attr('name', input_e.attr('name') + '[' + r + ']');
          select_r.attr('name', select_e.attr('name') + '[' + r + ']');

          $(this).children('ul').children('li').each(function(t) {

            var input_t =...