jquery插件动态添加列表

要创建一个Nestable子列表，您必须遵循以下模式:

<ol class="dd-list outer">
    ...
    <li class="dd-item addnewlist" data-id="4">
        <div class="dd-handle">Item 4</div>
        <!-- Dynamically added >>>>>> -->
        <ol class="dd-list outer">
            <li class="dd-item" data-id="3">
                <div class="dd-handle">Item 3</div>
            </li>
        </ol>
        <!--  <<<<<<  -->
    </li>
    ...
</ol>

。子列表应该放在div.dd-handle之后，并且它本身必须包含li.dd-item和div.dd-handle元素。

但是即使你做对了，还有一个更大的问题:Nestable不会知道底层DOM中有新元素，所以它不会正确地初始化它们，创建展开/折叠按钮等。此外，它没有办法让用户显式地重新初始化/重绘它。

你可以选择fork插件并添加所需的功能，或者尝试从你的代码中破解和扩展它。

这是我的尝试，它创建了一个reinit方法，可以在修改列表的DOM后调用它来更新它:

(function($) {
    var $plugin = $('<div>').nestable().data('nestable');
    var extensionMethods = {
        reinit: function() {
            // alias
            var list = this;
            // remove expand/collapse controls
            $.each(this.el.find(this.options.itemNodeName), function(k, el) {
                // if has <ol> child - remove previously prepended buttons
                if ($(el).children(list.options.listNodeName).length) {
                    $(el).children('button').remove();
                }
            });
            // remove delegated event handlers
            list.el.off('click', 'button');
            var hasTouch = 'ontouchstart' in document;
            if (hasTouch) {
                list.el.off('touchstart');
                list.w.off('touchmove');
                list.w.off('touchend');
                list.w.off('touchcancel');
            }
            list.el.off('mousedown');
            list.w.off('mousemove');
            list.w.off('mouseup');
            // call init again
            list.init();
        } // reinit
    };
    $.extend(true, $plugin.__proto__, extensionMethods);
})(jQuery);

这个方法可以这样调用:

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

完整示例:JSFiddle

我的方法很容易与Dekkard的方法相似。你会看到我大约11个月前在CodePen上做过这个，当时nestable.js的未来似乎比现在更光明，因为它在开发支持方面。我认为这是值得的，这样你就可以看到这个插件还可以做什么。

查看我的CodePen: http://codepen.io/mijopabe/pen/xlcjq.

您可以创建并使用计数器来跟踪您创建并正在操作的特定列表项:

$(function(){
  var nestablecount = 4;
  $('#appendnestable').click(function(){
  $('ol.outer').append('<li class="dd-item dd3-item" data-id="'+nestablecount+'">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="'
+nestablecount+'">Item '+nestablecount+'</div><div id="c-'+nestablecount+'" 
class="content"><form role="form-'+nestablecount+'"><div class="form-group"><label 
for="name">Name</label><input type="text" class="form-control" id="name" 
placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a 
Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet">
</textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)
</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div>
</div></form></div></li>');
  updateOutput($('#nestable').data('output', $('#nestable-output')));
  nestablecount++;
  });
});

                Hello All,
                My approach is very simple and is readily readable.
                Add 2 jquery files in your project :- 1) nestable.js 2) nestable.css
                **HTML**
                <label>Enter Your Data</label>
                <input type='text' id='tncInput'>
                <button id="appendnestable">Add Data to li</button>
                <div class="dd" id="nestable">
                  <ol class="dd-list outer"></ol>
                </div>
            **jQuery** 
            $('#nestable').nestable();
            $(function() {
              var nestablecount = 1;
              $('#appendnestable').click(function() {
                var tnc = $('#tncInput').val();
                var html = '<li class="dd-item" id="' + nestablecount + '"  data-id="' + nestablecount + '"><div class="dd-handle"> ' + tnc + '</div></li>'
                $('ol.outer').append(html);
                $('#tncInput').val('')
                nestablecount++;
              });
            });
        This is how you will be able to enter your data dynamically to LI.
    Moreover, you can even change some nestable configuration settings as follows :
    $('#nestable').nestable({maxDepth:2, group:1});
    maxDepth :- number of levels an item can be nested (default 5)
    group:-  group ID to allow dragging between lists (default 0)
Thanks!!