jascra jascra - 1 year ago 102
jQuery Question

jquery-sortable - limit nesting level

i am working on an UI which will use this jquery sortable script (http://johnny.github.io/jquery-sortable/). I want to have a nested list, where i give the user the ability to drag and drop from outer level to one level in. I am almost there, but there is no limit to the nesting so if we have

  1. first

  2. second

  3. third

  4. forth

and they drag it to

  1. first


  2. second

  3. forth

that is correct but I do not want them to be able to make a third level of indention, so this would be not allowed:

  1. first


    2. second


The 2. second which is a 3rd level of indention should not be allowed. I see in another plugin ( nestedSortable - which has other limitations so i am not using it, i see that it has a nesting limit) but I do not see that limit in jquery-sortable

The list is being creating dynamically via ajax and user selection of text, and every time they add a name, I add a list item, which also get an


added so that it can be a container. This is required so that i can allow any name to be dragged under another name. I don't know if they want to add it as a parent or child, so I always add the extra empty ordered list tags to the list item.

Heres an example:

<ol id="people" class="serialization vertical" name="people">
<li id="p0" data-id="p0" data-name="Hillary Clinton">
Hillary Clinton
<li id="p6" class="" data-id="p6" data-name="Hillary"><ol></ol>
<li id="p1" data-id="p1" data-name="Indra Nooyi">
Indra Nooyi
<li id="p3" class="" data-id="p3" data-name="Indra"><ol></ol>
<li id="p5" class="" data-id="p5" data-name="Nooyi"><ol></ol>
<li id="p7" class="" data-id="p7" data-name="Clinton"><ol></ol>

The Javascript to define the sortable list is simple it is:

var people_group = $('#people_ol.serialization').sortable({
group: 'people_trash',

The reason for the group is to allow people to put in the trash.

And when a user adds a new person to the list the javascript to do that is:

$('#people_ol').append("<li data-id='p"+person_index+"' data-name='"+add_text+"' id='p"+person_index+"' >"+add_text <ol></ol></li>");

I want to allow them to move Clinton under Hillary Clinton, but I do not want them to be able to move Clinton under Hillary (that would be the third level) - but this is not blocked and I want it to be.

Is there anyone who has done anything like this?


Answer Source

I found the answer to this. I will post if anyone else is searching for a solution.

This is how to achieve a nesting limit in jquery-sortable:

  isValidTarget: function ($item, container) {
        var depth = 1, // Start with a depth of one (the element itself)
            maxDepth = 2,
            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) {
            children = children.find('ol').first().find('li');

        return depth <= maxDepth;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download