Scriptaculous SortableTree

Leave a comment

22 Comments

1. Kristoff said June 11th, 2008 at 05:56 PM  ¶

   Sir, you just saved me countless hours of pointless tinkering. Thank you very much for sharing this resource and if you ever happen to come through this part of the old continent, I insist on buying you a drink. Thanks again!

2. Luke said June 19th, 2008 at 03:34 PM  ¶

   Cool, this is exactly what i needed. Thanks.

3. Sven said June 20th, 2008 at 11:18 AM  ¶

   Nice to see this stuff is useful to you guys. Please let me know if there’s something to improve!

   Kristoff, thanks. I’ve actually never been to Belgium. But if I ever do I’ll get back to you. ;)

4. Ossi Talonpoika said August 12th, 2008 at 03:32 PM  ¶

   I have spent whole day trying to find this. I was already considering to write whole thing by myself. Thank you!

5. V said August 18th, 2008 at 01:23 PM  ¶

   Is this working on IE too? From what I’ve seen is throwing an error..

6. instant.bonsai said August 18th, 2008 at 01:40 PM  ¶

   I had the same problem a few days ago. You have to remove the komma behind the bracket in line 63 to fix this.

7. V said August 18th, 2008 at 02:05 PM  ¶

   I’m receiving another error now, telling me that “Object doesn’t support this action”.

8. Pol said October 7th, 2008 at 10:38 AM  ¶

   Hello,

   How to serialize the tree ?

   I would like to have the position of each tree id…

   Is it possible ?

   Thanks !

9. Zaid said November 15th, 2008 at 11:28 PM  ¶

   Hey - im getting the “Object doesn’t support this action” in IE too (with the rogue comma removed) - has anyone made progress with this at all?

10. nullify said December 9th, 2008 at 03:27 PM  ¶

    Wonderful stuff! I will definitely implement this in my own page cms which also uses your superb routing-filter plugin. Keep up the good work!

11. Ryan said December 31st, 2008 at 09:00 PM  ¶

    for everyone getting the “Object doesn’t support this action” error in IE: this actually seems like a problem with the dragdrop.js file that is bundled when you download this. It looks like it is an older version of the script.aculo.us library. All you need to do to fix the problem is go to github and get the most current version of scriptaculous and replace dragdrop.js with the dragdrop.js from the newer version of scriptaculous.

12. thb said February 10th, 2009 at 12:49 PM  ¶

    awesome, man!

    Thanks a lot!

13. Chris said March 11th, 2009 at 12:25 AM  ¶

    Should add

    this.tree.unmark_all();

    to the onDrop call so that the script cleans up after itself once the drop is done.

    I was adding padding as the drag was happening depending on hover top bottom or insert and was having the css markers stay causing padding to remain after drop was finished.

    css markers would not clear until another drag was begun.

14. Rasmus said March 28th, 2009 at 09:56 AM  ¶

    Hi, great stuff. It’ll probably be used in an upcoming version of bromine (bromine.openqa.org)if i can figure out how to put a css class limit on the nodes that are draggable. Any clues?

    var tree = new SortableTree(‘tree’, { draggable: ‘:not(.tc)’ , droppable: { container: ‘:not(.tc)’ },

    the droppable stuff works, but not the draggable. Cheers, Rasmus

15. Aldrin Cabrera said May 8th, 2009 at 03:37 AM  ¶

    Thanks dude! Thank you so much!

16. Marc said June 1st, 2009 at 11:20 PM  ¶

    Awesome script, saved me a lot of hours of banging my head against my desk, top notch work

17. Michal Palma said June 4th, 2009 at 01:45 AM  ¶

    Man this is funny. scriptaculous wrote someone named Tomas Fuchs

18. Ryan said June 19th, 2009 at 04:52 PM  ¶

    I’ve been using this script for a while – it works great – but there’s one little thing I can’t seem to resolve. The entire containing element (in the example above - the box around the tree) is draggable, rather than just its contents. This gives some weird results when you try to drop it inside of itself.

19. Guillaume said July 24th, 2009 at 04:27 PM  ¶

    Thanks, This works great. However, I’m trying to add list items thru a button let’s say, (appendChild, etc.), but the newly created item seems not to be draggable at all. Is there any function to call back once the list has been appended ? Or better, is there any function in the class that would let me create new list elements ? I’m pretty new to js and i can look at the code for quite long without finding any solution…

    Thanks

20. roney said August 8th, 2009 at 08:48 AM  ¶

    Hi,

    I just want to know , How can i stop this sortable package to create sub points upto two levels.

    Thanks Roney

21. Kieran Simkin said November 21st, 2009 at 01:52 AM  ¶

    Guillaume, I’ve being dynamically adding elements using the following code, assuming $(‘categorytree’) references the

    of your tree and categorymanager_tree is the SortableTree object itself.

    var row = document.createElement('li');
    row.innerHTML='<input type="text" value="'+category_html['name']+'"> <a class="handle" href="#" onclick="return false;">Handle</a>';
    row.setAttribute('id','node_'+id);
    row.setAttribute('data-id',id);
    row.setAttribute('data-order',num);
    row.setStyle("display: none");
    category_manager_tree.setUnsortable();
    $('category_tree').insertBefore(row,$('category_tree').getElementsByTagName("li")[0]);
    new Effect.BlindDown(row,{duration:0.7, afterFinish: function() { 
        category_manager_tree.root.initChildren();
        category_manager_tree.setSortable();
        new Effect.Opacity('ajax-loader',{from: 1.0, to: 0.0, duration: 0.1});
        }});
    

    However, I am now having some troubles with my onDrag handler and I wish to ask if anything about SortableTree makes any assumptions about the ID values of each

    • element eg (node1, node11, node_2 etc)? I notice they all follow a pattern in the examples, but I’m just using database IDs for the numerical ID of each of my
    • elements, could this be causing weird behaviour?

    • Kieran Simkin said November 21st, 2009 at 01:56 AM  ¶

      Guillaume, I’ve being dynamically adding elements using the following code, assuming $(‘categorytree’) references the <ul> of your tree and categorymanager_tree is the SortableTree object itself.

      var row = document.createElement('li');
      row.innerHTML='<input type="text" value="'+category_html['name']+'"> <a class="handle" href="#" onclick="return false;">Handle</a>';
      row.setAttribute('id','node_'+id);
      row.setAttribute('data-id',id);
      row.setAttribute('data-order',num);
      row.setStyle("display: none");
      category_manager_tree.setUnsortable();
      $('category_tree').insertBefore(row,$('category_tree').getElementsByTagName("li")[0]);
      new Effect.BlindDown(row,{duration:0.7, afterFinish: function() { 
          category_manager_tree.root.initChildren();
          category_manager_tree.setSortable();
          new Effect.Opacity('ajax-loader',{from: 1.0, to: 0.0, duration: 0.1});
          }});
      

      However, I am now having some troubles with my onDrag handler and I wish to ask if anything about SortableTree makes any assumptions about the ID values of each <li> element eg (node1, node11, node_2 etc)? I notice they all follow a pattern in the examples, but I’m just using database IDs for the numerical ID of each of my <li> elements, could this be causing weird behaviour?