0

hereから jQuery.nestedSortable プラグインを使用しようとしていますが、機能 していません。

Web サイトでは動作しますが、ページのソースを表示して HTML として保存しても動作しません。

これが私のコードです：

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>
                <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'
    });

リスト要素をドラッグする機能を提供するには、これで十分だと思います。なぜそれが機能しないのかについて何か考えはありますか?

4

2 に答える 2

1

HTML 構造が間違っています。内部要素は の後ではなくの中に<ol>あるはずです。<li>

<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>

デモ: http://jsfiddle.net/ambiguous/bGuEc/

于 2011-09-04T03:50:17.390 に答える
0

問題は、HTML マークアップが無効であることだと思います。</li>タグの後にタグを終了する必要があり</ol>ます。このような：

  <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>
于 2011-09-04T03:51:14.993 に答える