javascriptjquerynested-sortable
How to limit nested list <li> to only two levels in Jquery Sortable?
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.
Solution
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.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices