nestable 里面的坑你知多少？

1：首先要知道$.dom.data(), 这个方法是存在缓存机制的

2：更新数据的时候也要使用$.dom.data() 去更新，不然数据是不会刷新的。

上关键代码

    <div class="ibox-content">
        <div class="dd" id="nestable2">
            <ol class="dd-list" id="attrbox">
            </ol>
        </div>
        <div class="m-t-md">
            <h5>数据：</h5>
        </div>
        <textarea id="nestable2-output" class="form-control"></textarea>


    </div>

<script>
    $('#addAttr').click(function () {
        var html = '<li class="dd-item" data-id="1"><div class="dd-handle-1"><span class="label label-warning dd-handle"><i class="fa fa-crosshairs"></i></span><span class="input-value"></span><a class="dfm btn btn-danger btn-xs pull-right del-content" href="javascrip:;" onclick="delInfo(this)" title="删除"><span class="fa fa-trash"></span></a><a class="dfm btn btn-success btn-xs pull-right add-content" href="javascrip:;" onclick="addInfo(this)" title="增加"><span class="fa fa-plus"></span></a><a class="dfm btn btn-info btn-xs pull-right edit-content" href="javascrip:;" onclick="editInfo(this)" title="编辑"><span class="fa fa-pencil"></span></a></div><ol class="dd-list"></ol></li>';
        $('#nestable2 #attrbox').append(html);
        updateData(false);
    })

    function addInfo(obj) {
        var tmp = obj;
        var html = '<li class="dd-item" data-id="6"><div class="dd-handle-1"><span class="label label-warning"><i class="fa fa-users"></i></span><span class="input-value"></span><a class="dfm btn btn-danger btn-xs pull-right del-content" href="javascrip:;" onclick="delInfo(this)" title="删除"><span class="fa fa-trash"></span></a><a class="dfm btn btn-info btn-xs pull-right edit-content" href="javascrip:;" onclick="editInfo(this)" title="编辑"><span class="fa fa-pencil"></span></a></div></li>';
        var parent = $(obj).parent(".dd-handle-1").next(".dd-list").append(html);
        updateData();
    }
    function delInfo(obj) {
        var tmp = obj;
        var parent = $(obj).parent(".dd-handle-1").parent(".dd-item").remove();
        updateData();
    }

    function editInfo(obj) {
        var temp = obj;
        var inputValue = $(obj).parent(".dd-handle-1").children(".input-value");
        var value = inputValue.html();
        var html = '<input type="text" onblur="inputSave(this)" value="'+ value +'">';
        // 增加input
        inputValue.html(html)
        updateData();
    }

    function inputSave(obj) {
        var temp = obj
        var value = $(obj).val();
        var inputValue = $(obj).parent(".input-value")
        inputValue.html(value); // 显示
        var change = inputValue.parent(".dd-handle-1").parent(".dd-item").data("id", value);
        $(obj).remove(); // 移除
        updateData();
    }

    function updateData(update = true) {

        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target)
            var output = list.data('output');
            if (!output) {
                list = $("#nestable2");
                output = list.data('output');
            }
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            } else {
                output.val('浏览器不支持');
            }
        };

        // activate Nestable for list 2
        $('#nestable2').nestable({
            group: 1
        }).on('change', updateOutput);

        // output initial serialised data
        updateOutput($('#nestable2').data('output', $('#nestable2-output')));
    }

    $(".dd-handle-1 input").blur(function(obj){
        updateData();
    });
</script>