I have been looking at the new Sortable Trees in Scriptaculous, and I want to use it for some parts of my app. The part I don''t understand is how to move a leaf node below an existing leaf node. It appears that the user can move a node and drop it as a leaf under a branch, but only if that branch already has at least one leaf under the branch. This appears to be true even if the branch had leaves and they are all dragged elsewhere. That is, if a branch has only one leaf, and I drag it out, I cannot then drag it back under that branch. Am I missing something or is this not yet supported. Is it planned? Does anyone have any suggestions? Thanks, --Will Merrell
Will Merrell wrote:> The part I don''t understand is > how to move a leaf node below an existing leaf node.[...snip description...]> Am I missing something or is this not yet supported. Is it planned? Does > anyone have any suggestions?You are correct. The Script.aculo.us sortables only supports dragging an object to an already existing subtree. I have a modification of Sortables that allows you to drag a node to a blank subtree. You can see a demo of this at http://docdemo.cordata.com. Feel free to rip off any code you see that might be useful. My tree does much more than what you need but it should contain what you need. The javascript file you are looking for is: http://docdemo.cordata.com/javascript/jstree.js This script is was written before Sortables added tree support and was only retrofitted to work with the native tree support after the fact (to avoid maintaining a patch) so it may not be implemented in the best way. Eric
Hi Will, Will Merrell wrote:> It appears that the user can move a node and drop it as a leaf under a > branch, but only if that branch already has at least one leaf under the > branch.What you want to achieve is already possible with the scriptaculous sortable tree functionality. You need to give leaf LIs at least an empty <ul>. Example: <li> I am a leaf node. <ul></ul> </li> This, together with the following CSS makes it possible to drag items even into leaf nodes. ul { min-height: 4px; } The great thing about this is, that you can distinguish between leaf nodes that other items *can* be dragged into and those that other items *cannot* be dragged into be putting an empty <ul> into them or not. cheers Ingmar
Eric Anderson wrote:> You are correct. The Script.aculo.us sortables only supports dragging > an object to an already existing subtree. I have a modification of > Sortables that allows you to drag a node to a blank subtree. >Thank you, This looks interesting, but frankly I am a little intimidated by it at first glance. I have not yet had the time to look at it in enough depth to work out what I want and what of your stuff I can use. Do you have any documentation on your additions? (I know its a foolish question, but one can hope.) But I appreciate your reply and generosity. I will probably have more questions later. --Will
Ingmar Schlecht wrote:>What you want to achieve is already possible with the scriptaculous >sortable tree functionality. > >Thank you, I am glad to hear that this is possible. I will experiment with this. I think that this information should be added to the documentation. Could someone add this to the documentation page for the Sortable Trees? I also wonder what it will take to ensure that this special <ul> cannot itself be dragged out and thus spoil the whole thing. Do you know how to handle that? I shall have to play with this. I have not yet had a chance to look at it. --Will
Ingmar Schlecht wrote:>What you want to achieve is already possible with the scriptaculous >sortable tree functionality. >You need to give leaf LIs at least an empty <ul>. > >Ok, I have been playing with this for a while and my conclusion is: No it doesn''t. I am using the functional test for the Sortable Trees, and it has the <ul> after each <li> as you describe. This test file does not seem to allow dropping under a leaf. Am I missing something? Is there some way to have this test file support the dropping we are talking about? --Will
Will Merrell wrote:> Am I missing something? Is there some way to have this test file support > the dropping we are talking about?Here''s the full code that worked well for me. cheers Ingmar <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> new document </title> <script src="scriptaculous/lib/prototype.js"></script> <script src="scriptaculous/src/scriptaculous.js"></script> <style> ul { min-height: 4px; background-color:red; } ul ul { min-height: 4px; height: 100px; background-color: yellow; } </style> </head> <body> <ul id="tree"> <li>Vegetables <ul> <li>Tomatos</li> <li>Potatoes</li> </ul> </li> <li>Leaf node <ul></ul> </li> </ul> <script> Sortable.create(''tree'', {tree: true}); </script> </body> </html>