如何在 Jquery 可排序中将嵌套列表 <li> 限制为只有两层？

Question

我正在使用 sortable jquery plugin 创建从左侧容器拖放到右侧容器的嵌套列表菜单项。

左侧容器中的每个项目，我允许嵌套一层。但是，在正确的容器中，我不希望它嵌套超过两层嵌套。

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 的算法，那么我只是简单地删除 <li>...</li> 内的 <ol></ol>，如果它是零级或一级嵌套，则将其追加回去。

在这里展示我希望它成为什么而不是什么：

更正只有 2 层嵌套项的嵌套层级

嵌套层数不正确，嵌套层数超过 2 层，我想对其设置限制

请帮助我如何检查嵌套级别并对其设置限制？谢谢。

Answer 1

由于没有人帮助回答这个问题，我想分享一下我在这方面的发现。

dept item for measuring and set limit for nested item 选项是作者考虑添加到 Jquery-sortable 中的东西，here reference。

虽然还不是一个选项，但内置方法有一个替代插件 isValidTarget set fourth with plugin:

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>

这个微小的简单示例片段帮助我实现了我的目标。

我希望这对遇到此类问题的人有所帮助。谢谢。

如何在 Jquery 可排序中将嵌套列表 <li> 限制为只有两层？

How to limit nested list <li> to only two levels in Jquery Sortable?

javascript

jquery

nested-sortable