How do I get the 'PowerTools' plugin to work for MooTools?

Question

Specifically, I am trying to use the Tree functionality, as can be seen here: http://cpojer.net/MooTools/tree/Demos/# The source can be seen here: https://github.com/cpojer/mootools-tree/blob/master/README.md

This is my 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>

I have added the Tree.js to my mootools.js core file.

This is my JS call:

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

As is, the sorting of the tree doesn't work.

Thoughts?

Answer 1

Found this question and thought about answering.
A bit late though, but I was not member on SO when you asked this question :)

What I changed to put this working:

• You need to pass just tree, the ID without the #.
• Your tree has to have only <ul> and <li> elements, otherwise tree.js will not be able to drag them over normal divs.
• You need unique ID's, I renamed all you id="admin" to class="admin" instead.

So you can use the javascript/mootools like:

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

Demo here

Answer 2

In the instantiation, you are passing a selector "#tree. If the tree class expects an ID, you don't use a pound sign, just "tree". In MooTools, there is a $ fn for ID lookups and a $$ fn for full selector lookups, there are various reasons they chose to separate the two.