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?

I tried doing this with Sortable for regular MooTools More, but I don't think I can do that. http://stackoverflow.com/questions/8282636/how-do-i-include-all-children-of-a-dom-element-to-be-dragged-using-the-sortable — marcamillion, Nov 27 '11 at 03:27
Just posted a new answer to an old question... it might be useful for some one else. — Sergio, Sep 02 '13 at 20:51

score 1 · Answer 1 · answered Nov 27 '11 at 12:41

1

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.

answered Nov 27 '11 at 12:41

csuwldcat

8,021
2
37
32

The weirdest thing is, I changed it...and it still doesn't work. I no longer get the error about 'Tree' being an `UnReferenced Error`. But, it just doesn't work...and I am not sure why. I have all the mootools files included on the page working properly (mootools core, mootools more, mootools class extras, and power tools). Do I need anything else? – marcamillion Nov 27 '11 at 19:28
Can you build a quick example in jsFiddle, this is hard to debug without seeing live. – csuwldcat Nov 27 '11 at 19:33
Ok I got it working, kinda: http://jsfiddle.net/VquhK/8/ Now the question is, how do I get it to work with the `divs` inside the `ul`. E.g., when I move `Test`, how do I let it move the `div` and text `Admin Controls` right above it, altogether? – marcamillion Nov 27 '11 at 21:15
So you want the element containing the text "Admin Controls" in your example on jsFiddle to essentially come with any selected group of draggable elements you choose to move? – csuwldcat Nov 30 '11 at 17:08

score 0 · Answer 2 · edited May 23 '17 at 11:49

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();
});

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

2 Answers2

Demo here