1

我正在使用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项目拖到另一个部分并让它带上它的所有子项。例如，如果我拖动具有链接的 li Top Links，我不仅要拖动单词，Top Links还要拖动作为该父级的子级的, 。基本上每个.div#adminullilili
  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.

我如何实现这些？

谢谢。

4

1 回答 1

1

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

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

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

于 2011-11-27T00:56:45.377 回答