Scriptaculous SortableTree

posted: May 30th, 2008 · by: Sven

in: Programming · tagged as: , , ·  31 comments »

For a project I’ve been working on recently I needed a sortable javascript tree widget that allows to drag and drop tree nodes and serialize an ajax call on drop events.

I’ve googled for solutions but did not find anything that implemented the simple things I wanted in a lightweight manner. So I started to check out the Scriptaculous sortable tree option but no matter what I tried I could not get it behave.

A couple of frustrating hours of reading the code and comments on the somewhat sparse Scriptaculous documentation (no offense!) I gave up and decided to implement this myself.

Here’s the result.

I’ve published this on GitHub: scriptaculous-sortabletree and there are two working demos online:

See demo/bold.html and demo/textmate.html for usage. If you’re familiar with Scriptaculous Draggables things should be pretty obvious :)

I haven’t included any fancy stuff (like configuring tree serialization to different query formats) because in Javascript one can always overwrite the default functions that are provided by the library with custom behaviour.

If you think something’s seriously missing though, please drop me a note!

Leave a comment

31 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?

    • Robert said April 21st, 2010 at 10:31 PM  

      Hi I tried your sortable tree and it looks great in firefox, but there’s a few glitches in IE 8 (at least from my computer)

      1) When dragging, the “orange” drag bar does not complety show. It seems like some padding or something is wrong with drop-top… drop-bottom is fine. What is funny is when I look at it from this website, it’s ok in IE 8. It’s really weird… I even copy pasted the code on this page, same result. Seems the code is different somewhere in here and the downloadable files : example : onroll over, you have orange, not in the demo. I checked the code and i can’t find anything different :/ . Should be easy to fix since it works on this site… (I’m still confused about this one)

      2) I put this tree in a div which I added : scroll: ‘ContainerNotions’, in the draggable options. When I drag n drop, it seems like there a refreshing problem : i need to kinda ‘trigger’ the list again (drag) so the

    • are ok’s (the dragged
    • is positionned correctly in it’s new location but there’s a blank left in the old location).

      Minor: You also need to remove ghosting: true because when dragging, the

    • is not positionned correctly to the mouse cursor (when starting down, dragging upwards)

      3) node 11 cannot be clicked to show/hide contents

      again, all these problemes occur only in ie8 (firefox mac-pc and safari-mac is fine)

      demo link of all these problems : http://simpol.ccdmd.qc.ca/admin/textmate2.html

      Think any fixes might come up ? any help appreciated! Thanks a lot!

    • QQQ said February 7th, 2011 at 06:35 PM  

      Finally we kissed and the passion scale went sky high and I knew I was onto a good thing - sex was a certainty free porn videos. She never hesitated when I began to fondle her breasts and she willingly exposed them for me mobile porn. They were firm and I suspected a breast enhancement but said nothing - they still felt good and I was enjoying them and gradually working my way further south free porn tube. She was a step ahead of me and before I could completely undress her she moved on me atk hairy and I was suddenly having my pants pulled down and I was enjoying one of he best cock sucking hairy pussy experiences I had ever had. ABB728019394

    • simplebro said March 1st, 2011 at 11:46 PM  

      I have found other examples of the sortable tree that work pretty good. I was wondering myself why the drag&drop was not working that good in my case.

      I finally found out that these other examples are using an older version of scriptaculous.

      Please test out yourself:

      Old version of scriptaculous - working good: http://www.woltlab.org/sortable1

      New version of scriptaculous - working not so good http://www.woltlab.org/sortable2

      my projects are viagra bas prix

    • ddsgd said March 21st, 2011 at 06:28 AM  

      How to Convert AVCHD films to AVI

      URL?http://www.wondershare.com/avchd/convert-avchd-to-avi.html Troubles we may possibly have encountered to take satisfaction in and reveal AVCHD films with friends:

      1. You have shot lots of films utilizing AVCHD camcorder, and you also need to upload these films to internet that consist of Youtube to reveal with friends, but you can’t determine the right way to create it.
      2. you could possibly also uncover which you would not possess the ability to available your AVCHD camcorder films on house windows film maker or advertising player.

      That’s true, the AVCHD structure is not accepted by lots of players, and also this kind of structure cannot be uploaded to internet which prevents film sharing. I’ve searched near to some great offer and uncover an simplest alternative finally. The simplest way can be to convert avchd to avi or other standard formats.

      The alternative we are able to consider to solve them: An AVCHD to AVI Converter is needed. Please click to obtain avchd to avi converter, set up and run it. Step one Get AVCHD films from AVCHD Camcorder to PC

      Connect the AVCHD Camcorder for the PC using a USB cable. when attached and powered on, the camcorder should seek out the desktop like a brand brand new disk. It is desirable which you duplicate the films for the PC’s hard-drive earlier to converting avchd to avi or editing it. Step 2. fill AVCHD camcorder videos

      Click “Add Video” or just drag & squirrel away your AVCHD camcorder films using the document checklist directly, you can very easily include AVCHD camcorder videos.

      Load AVCHD camcorder videos Step 3. find AVI as output format

      Select AVI as output structure away from your categorized output formats checklist in “Profile” drop-down checklist and specify the output list to preserve your converted records in “Output” drop-down list.

      Select Convert AVCHD films to AVI output format Step 4. start to convert avchd to avi

      After every little thing is done, strike “Start” key to convert avchd to avi. And all the things can be achieved at quickly demand and higher quality. The conversion demand often is dependent for the genuine film sizing as well as your PC configuration. as well as the output best quality is great.

      After converting avchd to avi, now you can upload these AVI films to internet or view them with house windows advertising Player/Movie Maker to reveal them jointly with your friends. The complete method is easy, and you also can possess a try of the AVCHD to AVI Converter to how to convert avchd to avi and reveal your delighted instant easily.

      Tips: Why we choose AVI format? As we realize that AVI structure is among the probably the most standard formats, that is broadly accepted by the majority of players. as well as the best quality of AVI film is great. using the sake of reputation and compatibility, AVI is regarded as probably the most advantageous choice. Therefore, you only should convert AVCHD to AVI, after which you can very easily reveal your AVCHD camcorder videos.

    • Okey oyunu said May 12th, 2011 at 03:37 PM  

      Tüm dünya artik okey oyunu oynuyor. Yillardir bir çok oyun programi olmasina ragmen, içlerinden en güzeli olarak nitelendirebilecegimiz tek bir site göze çarpmaktadir. Diger tüm okey oyunu programlarinin aksine ücretsiz olmasi ve 3 boyutlu olarak hizmet vermesi mükemmel bir gelismedir. Sizlerde www. okey-oyunu.com adresinden bu essiz okey oyununu indirebilirsiniz. Kullanimi çok basit ve Türkçe dil seçenegi ile kolaylikla oyuna baslayabilirsiniz. Ister kendi ülkenizden, isterseniz dünyanin tüm farkli bölgelerinden dilediginiz oyun odalarini seçerek, oyuna hemen baslayabilirsiniz. Okey oyunu oynamak için artik arkadas bile aramaniza gerek kalmadan, bilgisayarinizdan 100 binlerce üye ile online olarak okey oyununu oynamanin zevkine varabilirsiniz.

    • Joanne said May 13th, 2011 at 01:20 PM  

      Thankyou for an awesonme script! I dont rewuiure it at the moment but im sure i will in the future! :) Thanks for sharing it. Joanne from oil absorbent granules

    • Foana22 said May 20th, 2011 at 07:34 AM  

      I like your post its quite informative and i love to visit you again as you have done a wonderful job. i love to bookmark this site and would send it to other friends to read it and visit it to get upto date and quite interesting information pass4sure 642-533, i like the way you are working,keep it up, i will be here again as i get some time from pass4sure 642-731 because they make me little busy, but i would love to stuck here again image pass4sure 70-511. Thanks for sharing nice information with us.

    • porno said May 22nd, 2011 at 02:45 PM  

      I do agree with all of the ideas you have presented in your post. They’re really convincing and will definitely work. Still, the posts are too short for newbies. Could you please extend them a bit from next time? Thanks for the post.

    • porno said May 22nd, 2011 at 02:53 PM  

      good comment. thanks you friends.

      I’ve surfed the net more than three hours today, however, I haven’t found such useful information. Thanks a lot, it is really useful to me

Sorry, comments are closed for this article.

artweb design
Sven Fuchs
Grünberger Str. 65
10245 Berlin, Germany


http://www.artweb-design.de

Fon +49 (30) 47 98 69 96
Fax +49 (30) 47 98 69 97