如何包含要使用 MooTools 的 Sortable 插件拖动的 DOM 元素的所有子元素？

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 的 li，我不仅要拖动单词 Top Links，还要拖动 div#admin、ul 和 li 是该父级 li 的子级。本质上是每个 li 的所有子级。
2. 我还希望能够在孩子列表之间拖动项目。举例来说，假设我想将链接 Link 2 从该 ul 拖到名为 Awesome Links 的部分，并将其放在链接 <代码>链接11和链接12。

我已经这样做了：

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

它所做的只是拖动 li，而不是 li 的子级。

我如何实现这些目标？

谢谢。

Answer 1

首先，由于 categories 列表中的 div 项不在 li 标记本身中，因此您的 HTML 无效。对于有效列表，ul 的唯一直接子级可以是 li。

其次，根据文档，“要启用列表之间的排序，必须使用数组或选择器传递一个或多个列表或 id”（http://mootools.net/docs/more/Drag/Sortables）。这意味着，要在子列表之间移动项目，每个 ul 必须传递到可排序组（与类别组不同）。这应该可以解决您的问题#2。

我还不确定为什么它不会拖动 li 的全部内容，尽管可能是无效的 HTML 导致了问题。