Question

具体来说，我正在尝试使用Tree功能，如下所示： http://cpojer.net/MooTools/tree/Demos/#来源可以在这里看到： https://github.com/cpojer/mootools-tree/blob/master/README.md

这是我的HTML：

<ul class="tree" id="tree">
  <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>

我已将Tree.js添加到我的mootools.js核心文件中。

这是我的JS电话：

window.addEvent('domready', function(){
       var tree = new Tree('#tree');
        tree.serialize();
});

原样，树的排序不起作用。

思想？

Answer 1

在实例化中，你传递一个选择器“#tree。如果树类需要一个ID，你不要使用井号，只使用”树“。在MooTools中，有一个$ fn用于ID查找和a $$ fn用于完整选择器查找，他们选择将两者分开的原因有多种。

Answer 2

发现这个问题并考虑回答。
虽然有点晚了，但当你提出这个问题时，我并不是SO的成员：）

我改变了这项工作：

您需要仅传递tree，ID不包含#。
您的树必须只有<ul>和<li>元素，否则tree.js将无法将它们拖到普通div上。
您需要unique ID，我已将您id="admin"全部重命名为class="admin"。

所以你可以使用javascript / mootools：

window.addEvent('domready', function(){
       var tree = new Tree('tree');
        tree.serialize();
});

如何让'PowerTools'插件适用于MooTools？

2 个答案:

演示here