Как включить все дочерние элементы DOM-элемента, который нужно перетаскивать с помощью плагина Sortable для MooTools?

Question

Я использую mootools-more.1817.js... это моя структура HTML:

<ul id="categories">
  <div id="admin">Admin Controls</div>
    <li class="selected"><a href="#">Test</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Test 2</a>
        <ul>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Top Links</a>
        <ul>
            <li id="article"><a href="/1">Link 1</a></li>
            <li id="article"><a href="/3">Link 2</a></li>
            <li id="article"><a href="/2">Link 3</a></li>
            <li id="article"><a href="/4">Link 4</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Lame Links</a>
        <ul>
            <li id="article"><a href="/9">Link 9</a></li>
            <li id="article"><a href="/10">Link 10</a></li>
        </ul>
    </li>
  <div id="admin">Admin Controls</div>
    <li><a href="#">Awesome Links</a>
        <ul>
            <li id="article"><a href="/11">Link 11</a></li>
            <li id="article"><a href="/12">Link 12</a></li>
        </ul>
    </li>
</ul>

Поэтому я хочу сделать две вещи:

1. Быть в состоянии перетащить каждый li пункт в другой раздел и пусть он возьмет с собой всех своих детей. Например, если я перетаскиваю ли, который имеет ссылку Top LinksХочу перетащить не только слова Top Linksно также div#admin, ul а также li это дети этого родителя li, По сути, все дети каждого li,
2. Я также хотел бы иметь возможность перетаскивать элементы между списками детей. Так, например, скажем, я хочу перетащить ссылку Link 2 От этого ul в раздел под названием Awesome Links и поместите его между ссылками Link 11 а также Link 12,

Я сделал это:

window.addEvent('domready', function(){
    new Sortables('#categories', {
        clone: true,
        revert: true,
        opacity: 0.7  
    });
});

Что это делает, тащит просто liа не дети li,

Как мне этого добиться?

Благодарю.

Answer 1

Во-первых, у вас есть недействительный HTML, имея div предметы в вашем categories список, которого нет в li сами теги. Единственные непосредственные дети ul может быть li для действительного списка.

Во-вторых, согласно документации: "Чтобы включить сортировку между списками, один или несколько списков или идентификаторов должны передаваться с использованием массива или селектора" (http://mootools.net/docs/more/Drag/Sortables). Это означает, что для перемещения элементов между вашими подсписками, каждый ul должен быть передан в группу сортируемых материалов (отличную от группы категорий). Это должно решить вашу проблему № 2.

Я еще не уверен, почему бы не перетащить все содержимое li, хотя это может быть неправильный HTML вызывает проблемы.