menu_maker

by mikehudak

HTML

<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.ui.touch-punch.js"></script>
<h3>Menu</h3>

<ol class="sortable">
    <li id="list_1"><div><span class="disclose"><span></span></span>Item 1</div>
    <li id="list_2"><div><span class="disclose"><span></span></span>Item 2</div>

        <ol>
            <li id="list_3"><div><span class="disclose"><span></span></span>Item 3</div>
            <li id="list_4"><div><span class="disclose"><span></span></span>Item 4</div>
        </ol>
    </li>
</ol>

<br>

<h3>Export:</h3>

<p>
    <input type="submit" name="toArray" id="toArray" value="To array" />
<pre id="toArrayOutput"></pre>

<p>
    <em>Note: This demo has the <code>maxLevels</code> option set to '3'.</em>
</p>

CSS

.mjs-nestedSortable-error {
    background: #fbe3e4;
    border-color: transparent;
}

ol.sortable, ol.sortable ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
}

ol.sortable {
    margin: 0;
}

.sortable li {
    margin: 5px 0 0 0;
    padding: 0;
}

.sortable li div  {
    border: 1px solid #d4d4d4;
    border-color: #D4D4D4 #D4D4D4 #BCBCBC;
    padding: 6px;
    margin: 0;
    cursor: move;
    background: #f6f6f6;
}

.sortable li.mjs-nestedSortable-branch div {
    background-color: grey;

}

.sortable li.mjs-nestedSortable-leaf div {
    background-color: lightgray;

}

li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
    border-color: #999;
    background: #fafafa;
}

.disclose {
    cursor: pointer;
    width: 10px;
    display: none;
}

.sortable li.mjs-nestedSortable-collapsed > ol {
    display: none;
}

.sortable li.mjs-nestedSortable-branch > div > .disclose {
    display: inline-block;
}

.sortable li.mjs-nestedSortable-collapsed > div > .disclose > span:before {
    content: '+ ';
}

.sortable li.mjs-nestedSortable-expanded > div > .disclose > span:before {
    content: '- ';
}

JavaScript

$(document).ready(function() {

        $('ol.sortable').nestedSortable({
            forcePlaceholderSize: true,
            handle: 'div',
            helper: 'clone',
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            maxLevels: 3,
            isTree: true,
            expandOnHover: 700,
            startCollapsed: true
        });

        $('.disclose').on('click', function() {
            $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
        })

        $('#toArray').click(function(e) {
            arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
            arraied = dump(arraied);
            (typeof($('#toArrayOutput')[0].textContent) != 'undefined') ?
                    $('#toArrayOutput')[0].textContent = arraied : $('#toArrayOutput')[0].innerText = arraied;
        })

    });

    function dump(arr, level) {
        var dumped_text = "";
        if (!level)
            level = 0;

        //The padding given at the beginning of the line.
        var level_padding = "";
        for (var j = 0; j < level + 1; j++)
            level_padding += "    ";

        if (typeof(arr) == 'object') { //Array/Hashes/Objects
            for (var item in arr) {
                var value = arr[item];

                if (typeof(value) == 'object') { //If it is an array,
                    dumped_text += level_padding + "'" + item + "' ...\n";
                    dumped_text += dump(value, level + 1);
                } else {
                    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                }
            }
        } else { //Strings/Chars/Numbers etc.
            dumped_text = "===>" + arr + "<===(" + typeof(arr) + ")";
        }
        return dumped_text;
    }