Nestable.js

Nestable是jQuery的一個套件，作用是讓Html Tag<ol>底下的每個<li>可以進行拖曳的動作，也能在不同的<ol>之間進行拖曳。

作者連結：https://github.com/dbushell/Nestable

檔案下載：下載

參數說明：

group(選填) ： 用來指定允許交互拖放插入的群組 預設值： 0  

maxDepth(選填) ： 最多允許有幾個階層 預設值： 5  

threshold(選填) ： 預設值： 20  

listNodeName(選填) ： 要用來產生拖拉的元素 預設值： 'o1'  

itemNodeName(選填) ： 要用來產生拖拉的元素項目 預設值： 'li'  

rootClass(選填) ： 拖拉樣式的前綴 預設值： 'dd'  

listClass(選填) ： 要用來產生拖拉的元素所套用的樣式 預設值： 'dd-list'  

itemClass(選填) ： 要用來產生拖拉的元素項目所套用的樣式 預設值： 'dd-item'  

dragClass(選填) ： 當元素被拖拉時所套用的樣式 預設值： 'dd-dragel'  

handleClass(選填) ： 用來拖拉的控制項所套用的樣式 預設值： 'dd-handle'  

collapsedClass(選填) ： 當元素項目有子元素可以展開時所套用的樣式 預設值： 'dd-collapsed'  

placeClass(選填) ： 用來暫位用的元素所套用的樣式 預設值： 'dd-placeholder'  

emptyClass(選填) ： 當元素中沒有任何可拖拉的元素項目時所套用的樣式 預設值： 'dd-empty'  

expandBtnHTML(選填) ： 用來產生可以用來點擊展開用的按鈕 預設值： '<button data-action="expand" type="button">Expand</button>'  

collapseBtnHTML(選填) ： 用來產生可以用來點擊收合用的按鈕 預設值： '<button data-action="collapse" type="button">Collapse</button>'

方法說明：

$(selector).nestable(params);

 將指定區塊中的元素轉換成可拖拉效果 

$(selector).nestable('serialize');

 取得指定區塊中的元素拖拉後的結構  

$(selector).nestable('expandAll');  

 展開指定區塊中的元素

$(selector).nestable('collapseAll');

收合指定區塊中的元素

事件說明

$(selector).on('change', fn);

當指定區塊中的元素的位置被改變時

HTML

<div class="dd" id="Nestable1">
    <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>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <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>
                </li>
            </ol>
        </li>
    </ol>
</div>

Nestable運作的js

        onSetNestable: function () {
            // activate Nestable for list 1
            $('#Applied').nestable({
                group: 0,
                maxDepth: 1
            })
                //.on('change', updateOutput);
            // activate Nestable for list 2
            $('#Qualified').nestable({
                group: 0,
                maxDepth: 1
            })
                //.on('change', updateOutput);

            // activate Nestable for list 3
            $('#Interviewed').nestable({
                group: 0,
                maxDepth: 1
            })
                //.on('change', updateOutput);

            // activate Nestable for list 4
            $('#Hired').nestable({
                group: 0,
                maxDepth: 1
            })
                //.on('change', updateOutput);

  
            // output initial serialised data
            updateOutput($('#Applied').data('output', $('#Applied-output')));
            updateOutput($('#Qualified').data('output', $('#Qualified-output')));
            updateOutput($('#Interviewed').data('output', $('#Interviewed-output')));
            updateOutput($('#Hired').data('output', $('#Hired-output')));
    
            
        },

        onNestableChange:function()
        {
            var model =
                {
                    state: [],
                    data:[]
                }

            $('.dd').on('change', function (e) {
                console.log(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));
                    model.state.push(e.target.id);
                    model.data.push(window.JSON.stringify(list.nestable('serialize')));
                    console.log(model);
                } else {
                    output.val('JSON browser support required for this demo.');
                }             
            });
        },