如何限制嵌套列表 <li> 到Jquery Sortable中只有两个级别？

Question

I am using sortable jquery plugin to create a nested list menu items dragged and dropped from left container to right container.

Each item from left container, I allow one level nested. However, in the right container, I don't want it to be nested more than two levels nested.

 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> 

I really have no idea how can I check the nested level of item when it is dragged to from the left container to the right container. I just know the algorithm that if the items already has nested level 2, then I just simply remove <ol></ol> inside the <li>...</li> and append it back if it is in zero or one level nested.

Here to demonstrate what I want it to be and not to be:

Correct nested level which has only 2 levels nested item

Incorrect nested level which has more than 2 levels nested and which I want to set limit to it

Please kindly help me how can I do to check nested level and set limit to it? Thanks.

Answer 1

Since there is no one help answering on this, I would like to share what I have found on this.

The dept item for measuring and set limit for nested item option is something considered for adding into Jquery-sortable by the author, here reference .

Although it is not yet an option, there is an alternative add-on to the built-in method 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> 

This tiny simple sample snippet helped me achieve my goal.

I hoped this will help for somebody having a problem like this. Thanks.