如何限制嵌套列表 <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級，那么我只需將<li>...</li>內的<li>...</li> <ol></ol>刪除，然后將其添加回零或零即可。水平嵌套。

在這里展示我希望它成為和不成為的東西：

正確的嵌套級別，其中只有2個級別的嵌套項

不正確的嵌套級別，其中嵌套了兩個以上級別，並且我想對其設置限制

請幫助我如何檢查嵌套級別並為其設置限制？ 謝謝。

Answer 1

由於沒有人對此提供幫助，因此，我想分享一下我對此的發現。

作者考慮將用於測量和設置嵌套項目限制的dept item添加到Jquery-sortable中， 此處為參考 。

盡管還不是一種選擇，但是內置方法isValidTarget第四個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> 

這個小小的簡單示例代碼片段幫助我實現了目標。

我希望這將對遇到類似問題的人有所幫助。 謝謝。