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>

所以我想做两件事：

能够将每个li项目拖动到另一个部分并让它的所有子项都使用它。例如。如果我拖动包含Top Links链接的li，我不仅要拖动Top Links，还要拖动div#admin，ul和li那是父母li的孩子。基本上每个li的所有孩子。
我还希望能够在孩子的列表之间拖动项目。例如，假设我想将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

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

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

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

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

1 个答案: