Как ограничить вложенный список <li>только двумя уровнями в Jquery Sortable?

Question

Я использую сортируемый плагин jquery для создания вложенного списка пунктов меню, перетаскиваемых из левого контейнера в правый контейнер.

Для каждого элемента из левого контейнера я допускаю один уровень вложенности.Однако в правильном контейнере я не хочу, чтобы он был вложен более чем в два уровня.

function Menu_init() {
  // alert('Menu_init');
  var oldContainer;
  $("ol.example").sortable({
    group: 'nested',
    exclude: '.unsortable', // exclude module description from being drage droped
    afterMove: function(placeholder, container) {
      if (oldContainer != container) {
        if (oldContainer)
          oldContainer.el.removeClass("active");
        container.el.addClass("active");

        oldContainer = container;
      }
    },
    onDrop: function($item, container, _super) {
      container.el.removeClass("active");
      _super($item, container);
      li = $item;
      // console.log(li.children().children().length);
      var children = li.children().children();
      var child;
      var numOfChildren = children.length;
      containerID = container.target[0].id;
      if (containerID !== 'myUL') {
        if (numOfChildren == 1) {
          li.children('a').css({
            'visibility': 'visible'
          });
        } else {
          for (var element in children) {
            child = children[element].nodeName;
            if (child == 'LI') {
              $(children[element]).find('a').css('visibility', 'visible');
            } else if (child == 'A') {
              $(children[element]).css('visibility', 'visible');
            }
          }
        }
      } else {
        li.children('a').css('visibility', 'hidden');
      }
    }

  });

  // init filter
  // itemFilter("myInput","myUL");
}

$(function() {
  Menu_init();
})

div#icon-picker {
  margin-top: 20px;
  height: 300px !important;
  width: 330px !important;
  overflow: scroll;
}

div#icon-picker i {
  display: inline-block;
  padding: 5px;
}

div#icon-picker i:hover {
  background: #ccc;
  cursor: pointer;
}

body.dragging,
body.dragging *,
.dragged {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
  padding-left: 0 !important;
}

ol.forms li,
ol.example2 li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}

ol.example li a,
ol.example2 i {
  font-size: 15px !important;
}

ol.form li>a,
ol.example2 li>a {
  line-height: 0px;
  margin-top: 15px;
  font-size: 16px padding: 15px;
}

ol.example2 li:last-child {
  margin-bottom: 10px;
}

li:hover {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}

li>i {
  padding: 4px 7px !important;
}

ol ol {
  background: #eeeeee;
}

.dragged {
  opacity: 0.5;
}

ol.example li.placeholder {
  position: relative;
  border: 3px dashed red;
  opacity: 0.5;
}

ol.example li.placeholder:before {
  /*position: absolute;*/
  /* Define arrowhead*/
}

ol.example {
  border: 1px solid #ccc;
}

.popover {
  height: 400px;
  overflow-y: scroll;
}

li>i {
  padding: 15px;
  cursor: pointer;
}

li .popover {
  cursor: pointer;
}

li .popover i {
  padding: 10px;
}

li .popover i:hover {
  background: #CCC;
}

i.move_right {
  visibility: hidden;
}

ol.forms li:hover>i.move_right {
  visibility: visible;
  animation-name: move-right;
  animation-delay: 0s;
  animation-duration: 1s;
  /*animation-iteration-count: infinite;*/
  /*animation-dir*/
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 1000000000;
  list-style-type: none;
  /*background: #FFF;*/
}

button.saveChange {
  position: absolute;
  z-index: 1000000000;
  top: 44px;
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}

ol.example2>li[data-act='N'] {
  text-decoration: underline;
}


/* search box inside select2*/

input.select2-input {
  margin: 12px 0 8px 0 !important;
}

div[id^="target"]:not(#target1) {
  display: none;
}


/* here to set height and auto scroll for both container*/

ol#myUL,
ol.example {
  height: 600px !important;
  overflow: scroll;
}


/*div.newMenu{ border: 1 solid black; }*/

ol.example2>li:last-child {
  margin-bottom: 30px;
}

div.iconPopover {
  top: 0px !important;
}

.modal {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <form class="form-horizontal">
    <session id="MenuList">
      <div class="container">
        <dir class="row">
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <ol class="example forms" id="myUL">
              <li>
                <i class=""></i>Customer
                <a href="JavaScript:void(0)" style="visibility: hidden;">
                  <i class="fa fa-pencil"></i>
                </a>
                <ol>
                  <li>
                    <i class=""></i>Customer A
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Customer B
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Customer C
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                </ol>
              </li>
              <li>
                <i class=""></i>Teller
                <a href="JavaScript:void(0)" style="visibility: hidden;">
                  <i class="fa fa-pencil"></i>
                </a>
                <ol>
                  <li>
                    <i class=""></i>Till Open
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Till Close
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Cash Deposit
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Cash Withdrawal
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Till to Till Transfer
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Income Posting
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Expense Posting
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                </ol>
              </li>
            </ol>
          </div>
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <div class="newMenu">
              <ol class="example example2 sortable">

              </ol>
            </div>
          </div>
        </dir>
      </div>
    </session>
  </form>
</div>

Я действительно понятия не имею, как я могу проверить уровень вложенности элемента, когда он перетаскивается из левого контейнера в правый контейнер.Я просто знаю алгоритм, что если у элементов уже есть вложенный уровень 2, то я просто удаляю <ol></ol> внутри <li>...</li> и добавляю его обратно, если он находится на нуле или на одном уровне.

Здесьпродемонстрировать, что я хочу, чтобы это было и не было:

Правильный вложенный уровень, который имеет только 2 уровня вложенного элемента

Неправильный вложенный уровень, который имеет более 2 вложенных уровней и которому я хочу установить ограничение на него

Пожалуйста, помогите мне, как я могу проверить вложенный уровень и установить лимит на него?Благодарю.

Answer 1

Поскольку никто не поможет ответить на этот вопрос, я хотел бы поделиться тем, что я нашел по этому вопросу.

Параметр dept item для измерения и установки предела для вложенного элемента - это то, что следует добавитьJquery-сортируемый автором, здесь ссылка .

Хотя это еще не вариант, есть альтернативное дополнение к встроенному методу isValidTarget установить четвертым с плагином:

isValidTarget: function ($item, container) {
    var depth = 1, // Start with a depth of one (the element itself)
        maxDepth = 2, // *** 3 for my case
        children = $item.find('ol').first().find('li');

    // Add the amount of parents to the depth
    depth += container.el.parents('ol').length;

    // Increment the depth for each time a child
    while (children.length) {
        depth++;
        children = children.find('ol').first().find('li');
    }

    return depth <= maxDepth;
}

function Menu_init() {
  // alert('Menu_init');
  var oldContainer;
  $("ol.example").sortable({
    group: 'nested',
    exclude: '.unsortable', // exclude module description from being drage droped
    afterMove: function(placeholder, container) {
      if (oldContainer != container) {
        if (oldContainer)
          oldContainer.el.removeClass("active");
        container.el.addClass("active");

        oldContainer = container;
      }
    },
    isValidTarget: function($item, container) {
      var depth = 1, // Start with a depth of one (the element itself)
        maxDepth = 3, // *** 3 for my case
        children = $item.find('ol').first().find('li');

      // Add the amount of parents to the depth
      depth += container.el.parents('ol').length;

      // Increment the depth for each time a child
      while (children.length) {
        depth++;
        children = children.find('ol').first().find('li');
      }

      return depth <= maxDepth;
    },
    onDrop: function($item, container, _super) {
      container.el.removeClass("active");
      _super($item, container);
      li = $item;
      // console.log(li.children().children().length);
      var children = li.children().children();
      var child;
      var numOfChildren = children.length;
      containerID = container.target[0].id;
      if (containerID !== 'myUL') {
        if (numOfChildren == 1) {
          li.children('a').css({
            'visibility': 'visible'
          });
        } else {
          for (var element in children) {
            child = children[element].nodeName;
            if (child == 'LI') {
              $(children[element]).find('a').css('visibility', 'visible');
            } else if (child == 'A') {
              $(children[element]).css('visibility', 'visible');
            }
          }
        }
      } else {
        li.children('a').css('visibility', 'hidden');
      }
    }

  });

  // init filter
  // itemFilter("myInput","myUL");
}

$(function() {
  Menu_init();
})

div#icon-picker {
  margin-top: 20px;
  height: 300px !important;
  width: 330px !important;
  overflow: scroll;
}

div#icon-picker i {
  display: inline-block;
  padding: 5px;
}

div#icon-picker i:hover {
  background: #ccc;
  cursor: pointer;
}

body.dragging,
body.dragging *,
.dragged {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
  padding-left: 0 !important;
}

ol.forms li,
ol.example2 li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}

ol.example li a,
ol.example2 i {
  font-size: 15px !important;
}

ol.form li>a,
ol.example2 li>a {
  line-height: 0px;
  margin-top: 15px;
  font-size: 16px padding: 15px;
}

ol.example2 li:last-child {
  margin-bottom: 10px;
}

li:hover {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}

li>i {
  padding: 4px 7px !important;
}

ol ol {
  background: #eeeeee;
}

.dragged {
  opacity: 0.5;
}

ol.example li.placeholder {
  position: relative;
  border: 3px dashed red;
  opacity: 0.5;
}

ol.example li.placeholder:before {
  /*position: absolute;*/
  /* Define arrowhead*/
}

ol.example {
  border: 1px solid #ccc;
}

.popover {
  height: 400px;
  overflow-y: scroll;
}

li>i {
  padding: 15px;
  cursor: pointer;
}

li .popover {
  cursor: pointer;
}

li .popover i {
  padding: 10px;
}

li .popover i:hover {
  background: #CCC;
}

i.move_right {
  visibility: hidden;
}

ol.forms li:hover>i.move_right {
  visibility: visible;
  animation-name: move-right;
  animation-delay: 0s;
  animation-duration: 1s;
  /*animation-iteration-count: infinite;*/
  /*animation-dir*/
}

.opts {
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: 1000000000;
  list-style-type: none;
  /*background: #FFF;*/
}

button.saveChange {
  position: absolute;
  z-index: 1000000000;
  top: 44px;
}

.opts li {
  padding: 15px;
  background: rgba(0, 0, 0, .8);
}

.bckg {
  background: rgba(0, 0, 0, .6);
}

ol.example2>li[data-act='N'] {
  text-decoration: underline;
}


/* search box inside select2*/

input.select2-input {
  margin: 12px 0 8px 0 !important;
}

div[id^="target"]:not(#target1) {
  display: none;
}


/* here to set height and auto scroll for both container*/

ol#myUL,
ol.example {
  height: 600px !important;
  overflow: scroll;
}


/*div.newMenu{ border: 1 solid black; }*/

ol.example2>li:last-child {
  margin-bottom: 30px;
}

div.iconPopover {
  top: 0px !important;
}

.modal {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <form class="form-horizontal">
    <session id="MenuList">
      <div class="container">
        <dir class="row">
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <ol class="example forms" id="myUL">
              <li>
                <i class=""></i>Customer
                <a href="JavaScript:void(0)" style="visibility: hidden;">
                  <i class="fa fa-pencil"></i>
                </a>
                <ol>
                  <li>
                    <i class=""></i>Customer A
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Customer B
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Customer C
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                </ol>
              </li>
              <li>
                <i class=""></i>Teller
                <a href="JavaScript:void(0)" style="visibility: hidden;">
                  <i class="fa fa-pencil"></i>
                </a>
                <ol>
                  <li>
                    <i class=""></i>Till Open
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Till Close
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Cash Deposit
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Cash Withdrawal
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Till to Till Transfer
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Income Posting
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil"></i>
                    </a>
                    <ol></ol>
                  </li>
                  <li>
                    <i class=""></i>Expense Posting
                    <a href="JavaScript:void(0)" style="visibility: hidden;">
                      <i class="fa fa-pencil">
										    	</i>
                    </a>
                    <ol></ol>
                  </li>
                </ol>
              </li>
            </ol>
          </div>
          <div class="col-xs-6">
            <h4 class="center">List Available Menu</h4>
            <div class="newMenu">
              <ol class="example example2 sortable">

              </ol>
            </div>
          </div>
        </dir>
      </div>
    </session>
  </form>
</div>

Этот крошечный простой фрагмент кода помог мне достичь своей цели.

Я надеялся, что это поможет кому-то, у кого возникла такая проблема.Спасибо.