Nested Page Sorting

by bgrins

HTML

<div id="pages">    

    <ul id="draft-pages" class="sortable">
        
            
    <li pageid="59b3b8ef-75cf-4905-b494-a53784c95b58">
        <div><a href="#" class="name">Me</a></div>
    </li>
    <li pageid="59b3b8ef-75cf-4905-b494-a53784c95b58">
        <div><a href="#" class="name">Projects</a></div>
    </li>
    <li pageid="59b3b8ef-75cf-4905-b494-a53784c95b58">
        <div><a href="#" class="name">Assessment</a></div>
    </li>
    <li pageid="63ae0675-b278-4fe0-a446-2ca9b8177e2c" style="">
        <div><a href="#" class="name">Home</a></div>
    </li>
    <li pageid="63ae0675-b278-4fe0-a446-2ca9b8177e2c" style="">
        <div><a href="#" class="name">Feedback</a></div>
    </li>

        
    </ul>
</div>

CSS

ul.sortable, ul.sortable ul {
            margin: 10px 0 0 25px;
            padding: 0;
            list-style-type: none;
    border: solid 1px #999;
        }
ul.sortable ul { border: none; margin-left:10px; }
ul.sortable, ul.sortable ul {
}

ul.sortable li ul li { margin-left: 10px;}
ul.sortable li { position:relative;
margin-left: 20px;
}
ul.sortable li:before {
    content: "";
    position:absolute;
    left: -20px;
    width: 20px;
    top: 10px;
    border-top: solid 2px black;
    font-size: 20px;
    font-weight:bold;
    
}
ul.sortable ul li:before {
 
    left: -40px;
    width: 40px;   
}
ul.sortable ul ul {
 display:none;   
}

li.placeholder { border:none;}

.ui-nestedSortable-error {
    background:#fbe3e4;
    color:#8a1f11;
    visibility:hidden;
}

ul.sortable ul:empty {
display:none;
}

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

        .sortable li div  {
            padding: 3px;
            margin: 0;
            cursor: move;
        }

JavaScript

/*
 * jQuery UI Nested Sortable
 * v 1.3.4 / 28 apr 2011
 * http://mjsarfatti.com/sandbox/nestedSortable
 *
 * Depends:
 *     jquery.ui.sortable.js 1.8+
 *
 * License CC BY-SA 3.0
 * Copyright 2010-2011, Manuele J Sarfatti
 */

(function($) {

    $.widget("ui.nestedSortable", $.extend({}, $.ui.sortable.prototype, {

        options: {
            tabSize: 20,
            disableNesting: 'ui-nestedSortable-no-nesting',
            errorClass: 'ui-nestedSortable-error',
            listType: 'ol',
            maxLevels: 0,
            revertOnError: 1
        },

        _create: function() {
            this.element.data('sortable', this.element.data('nestedSortable'));
            return $.ui.sortable.prototype._create.apply(this, arguments);
        },

        destroy: function() {
            this.element
                .removeData("nestedSortable")
                .unbind(".nestedSortable");
            return $.ui.sortable.prototype.destroy.apply(this, arguments);
        },

        _mouseDrag: function(event) {

            //Compute the helpers position
            this.position = this._generatePosition(event);
            this.positionAbs = this._convertPositionTo("absolute");

            if (!this.lastPositionAbs) {
                this.lastPositionAbs = this.positionAbs;
            }

            //Do scrolling
            if(this.options.scroll) {
                var o = this.options, scrolled = false;
                if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {

                    if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
                        this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
                    else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
                        this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;

            ...