jQuery nestedSortable

I am trying to use the jQuery.nestedSortable plugin from here, and its not working.

It works in the website, but even when I view the page source, and save it as HTML, it does not work.

Here's my code:

HTML:

    <ol class="sortable">
        <li id="list_1"><div>A</div></li>
            <ol>
                <li id="list_2"><div>1</div></li>
                <li id="list_3"><div>2</div></li>
                <li id="list_4"><div>3</div></li>开发者_如何学Go;
                <li id="list_5"><div>4</div></li>
            </ol>
        <li id="list_6"><div>B</div></li>
            <ol>
                <li id="list_7"><div>1</div></li>
                <li id="list_8"><div>2</div></li>
            </ol>
    </ol>

javascript:

    $('ol.sortable').nestedSortable({
        disableNesting: 'no-nest',
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        maxLevels: 2,
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div'
    });

I feel this should be enough to provide the functionality to drag the list elements. Any idea on why its not working?

---

Your HTML structure is wrong, the inner <ol> elements are supposed to be inside the <li>, not after.

<ol class="sortable">
    <li id="list_1"><div>A</div>
        <ol>
            <li id="list_2"><div>1</div></li>
            <li id="list_3"><div>2</div></li>
            <li id="list_4"><div>3</div></li>
            <li id="list_5"><div>4</div></li>
        </ol>
    </li>
    <li id="list_6"><div>B</div>
        <ol>
            <li id="list_7"><div>1</div></li>
            <li id="list_8"><div>2</div></li>
        </ol>
    </li>
</ol>

Demo: http://jsfiddle.net/ambiguous/bGuEc/

---

I think the problem is that your HTML markup is invalid. You have to end your </li> tags after the </ol> tags. Like this:

  <ol class="sortable">
        <li id="list_1"><div>A</div>
            <ol>
                <li id="list_2"><div>1</div></li>
                <li id="list_3"><div>2</div></li>
                <li id="list_4"><div>3</div></li>
                <li id="list_5"><div>4</div></li>
            </ol>
            </li>
        <li id="list_6"><div>B</div>
            <ol>
                <li id="list_7"><div>1</div></li>
                <li id="list_8"><div>2</div></li>
            </ol>
            </li>
    </ol>