jquery-nestable控件使用 - 闲笔杂叙 - CSDN博客

安宇雨 - 随手采集
2019-05-28 11:25:47
随手采集
0000-未整理-等待研究

js

//引入js和css 当然jquery是必备的
jquery.nestable.js
jquery.nestable.css
//有时候不需要拖动，在jquery.nestable.js文件中找到这一句js（大概107行）
list.dragStart(e.touches ? e.touches[0] : e)
       var updateOutput = function (e) {
            var list = e.length ? e : $(e.target),
                output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            } else {
                output.val('浏览器不支持');
            }
        };
        $('#nestable2').nestable({
            group: 1
        }).on('change', updateOutput);
        updateOutput($('#nestable2').data('output', $('#nestable2-output')));

        $('#nestable-menu').on('click', function (e) {
            var target = $(e.target),
                action = target.data('action');
            if (action === 'expand-all') {
                $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
                $('.dd').nestable('collapseAll');
            }
        });

html

“`

                        <div id="nestable-menu">
                            <button type="button" data-action="expand-all" class="btn btn-white btn-sm btn-mini">全部展开</button>
                            <button type="button" data-action="collapse-all" class="btn btn-white btn-sm btn-mini">收起全部</button>
                        </div>

                        <div class="cf nestable-lists">
                            <div class="dd" id="nestable2">
                                <ol class="dd-list dark">
                                    <li class="dd-item " data-id="13">
                                        <div class="dd-handle">Item 13</div>
                                    </li>
                                    <li class="dd-item" data-id="14">
                                        <div class="dd-handle">Item 14</div>
                                    </li>
                                    <li class="dd-item" data-id="15">
                                        <div class="dd-handle">Item 15</div>
                                        <ol class="dd-list">
                                            <li class="dd-item" data-id="16"><div class="dd-handle">Item 16</div></li>
                                            <li class="dd-item" data-id="17"><div class="dd-handle">Item 17</div></li>
                                            <li class="dd-item" data-id="18"><div class="dd-handle">Item 18</div></li>
                                        </ol>
                                    </li>
                                </ol>
                            </div>
                            <div class="clearfix"></div>
                        </div>

“`