jQuery nestedSortable - PullRequest
Новая
       39

jQuery nestedSortable

0 голосов
/ 04 сентября 2011

Я пытаюсь использовать плагин jQuery.nestedSortable из здесь , и он не работает.

Он работает на веб-сайте, но даже когда я просматриваю исходный код страницы и сохраняюэто как 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'
    });

Мне кажется, этого должно быть достаточно, чтобы обеспечить функциональность для перетаскиванияэлементы списка.Есть идеи, почему это не работает?

Ответы [ 2 ]

1 голос
/ 04 сентября 2011

Ваша 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/

0 голосов
/ 04 сентября 2011

Мне кажется, проблема в том, что ваша 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>
...