javascript - How to destroy a Nestable.js list? - Stack Overflow

admin管理员组

文章数量:1278789

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 ?

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 ?

• javascript
• jquery
• jquery-plugins
• drag-and-drop

Share Improve this question Follow asked Nov 18, 2013 at 14:21 ryanceyryancey 1,05722 gold badges1111 silver badges2828 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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

This should be inserted after the AJAX request

$('#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.

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.

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

https://github./jkempff/Nestable/mit/2a11636a2d4b6a36de6c942a5120f5360f484546

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.

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>');

本文标签： javascriptHow to destroy a Nestablejs listStack Overflow