1

I'm using the Nestable.js jQuery plugin to create a draggable & droppable item list, used in a backend for managing menus. It is no longer maintained but I couldn't find a clean and simple alternative, so I told myself I should give it a try.

A list look like this:

<div class="dd" id="nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
                        <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
                        <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
                    </ol>
                </li>
                <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
                <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
            </ol>
        </li>
        <li class="dd-item" data-id="11">
            <div class="dd-handle">Item 11</div>
        </li>
        <li class="dd-item" data-id="12">
            <div class="dd-handle">Item 12</div>
        </li>
    </ol>
</div>

And is "nestified" with this:

$('#nestable').nestable();

I update the list with AJAX requests, and then have to reload the plugin in order for it to consider the modifications. The author didn't make a .destroy() function, and the problem is that the + (expand) and - (collapse) don't show when I update the list (see the demo).

I tried $('#nestable').off() before the AJAX request and then re-doing a $('#nestable').nestable(), but it doesn't work.

Otherwise, is there a good drag & drop list alternative to Nestable.js ?

0

6 Answers 6

5
$('#nestable').nestable('init');

This should be inserted after the AJAX request

2
  • why had this answer -1? It did work for me... Upvoted to 0 ;-)
    – Red Pill
    May 25, 2016 at 22:34
  • This one helped me where I wanted to refresh the nestable list after dynamically adding an element in it.
    – Pankaj Jha
    Sep 10, 2018 at 15:00
4
$('#nestable').nestable('init');  

it works,cost my much times to solve this problem. The solution is if you get a json from ajax, then use handlebars to render the json, and append to the list or use .html() to put the items to the list. now the expand/collapse doesn't appear, so you can use:

$('#nestable').nestable('init')

to solve your problem.

2

Relative to your question

Three resources I have found useful:

  1. Nestable.js by David Bushell (continued here by Ramon Smit)
  2. jQuery Sortable by Jonas von Andrian
  3. NestedSortable.js by Manuele J. Safartti (continued here by Matt Parnell)

The first is touch-friendly, but is more limited than the rest and is no longer actively maintained by the original author (last update was 2 years ago). There are, however, forks on Github that other authors are contributing to and improving.

The second is an opinionated sorting plugin and works well with Bootstrap. As of this writing, last update was four months ago. Definitely worth looking in to should time permit.

The third offers more options than the first without messing with core files too much. The last update was 10 days ago.

I have had sufficient success with the first, but it depends on your needs.

Relative to your post's title

I'm unsure if this is the 'optimal' method, but I use jQuery's .remove() before Nestable's updateOutput method.... Maybe you're not using .delegate() if the elements haven't been created yet when the page is loaded? It would help if you could clarify or make a fiddle.

0

$('#nestable').nestable('destroy');

https://github.com/jkempff/Nestable/commit/2a11636a2d4b6a36de6c942a5120f5360f484546

0

The best solution I found is to traverse over the list calling setParent on each item. After the list has been updated, do this:

var list = $('#nestable').data('nestable');
$('.dd-item').each(function() {
    var item = $(this),
    parent = item.parent();
    list.setParent(item);
    if (parent.hasClass(list.options.collapsedClass)) {
        list.collapseItem(parent.parent());
    }
});

This is the same thing that Nestable does during initialization. There is no need to re-apply $('#nestable').nestable() after doing this.

0

You don't need destroy, just add item or reset items like that:

// add item
$('<li class="dd-item" data-id="1"><div class="dd-handle">Item 1</div></li>').appendTo('#nestable .dd-list');
// or reset items
$('#nestable').html('<ol class="dd-list"><li class="dd-item" data-id="1"><div class="dd-handle">Item 1</div></li><li class="dd-item" data-id="2"><div class="dd-handle">Item 2</div></li></ol>');
1
  • Isn't it somewhat distasteful to edit HTML directly instead of constructing DOM objects and manipulating the DOM abstractly using jQuery? Sep 29, 2014 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.