Sortable.tree: empty subtree bug?
alawi
my only problem is that if a node doesn't have any children, there is
no way to give it a child. That is, if i drag a node, i can't make it
a child of a leaf node. This is bad because you can't undo some
actions (if a node has only one child, dragging that child out is
irreversible).
One thing that has worked (albeit inconsistently) is to give every
node an invisible (display:none) sub-node:
<ol id="monkey">
<li> hello there!
<ul style="padding:2px"><li style="display:none"></li>
<li> this is amazing<ul style="padding:2px"><li
style="display:none"></li></ul></li>
</ul>
</li>
<li> hello there!
<ul style="padding:2px">
<li style="display:none"></li>
<li> hello there!<ul style="padding:2px"><li
style="display:none"></li></ul></li>
</ul>
</li>
</ol>
<script>
Sortable.create("monkey", {tree:true});
</script>
However, making the null nodes visible and not sortable (using "only")
has not worked (i.e., when a node only has a non-sortable child, it
won't receive any sortable children).
Unfortunately, I haven't been able to get this trick to work with
nested divs:
<style>
.item { padding:10px;border:1px solid black;background-color:#ACE; }
.list { padding:10px;padding-left:20px; }
.null { height:10px; background-color:#FFF;}
</style>
<div id="monkey">
<div class="item">Item 1<div class="list"><div class="null"></
div><div class="item">Item 2<div class="list"><div class="null"></
div></div></div></div></div>
<div class="item">Item 3<div class="list"><div class="null"></div></
div></div>
<div class="item">Item 4<div class="list"><div class="null"></div></
div></div>
</div>
<script>
Sortable.create("monkey", {tag:"div", only:["item","null"],
treetag:"div", tree:true});
</script>
This doesn't work if you change the style of the null elements to make
them invisible:
.null { display:none; }
or if you remove "null" from the only list.
Any work-arounds?
-- alawi
Walter Lee Davis
that will open it up just enough to allow content to be dropped in it.
Point in fact, it is still droppable, but it has a height of 0, so it's
just functionally impossible to get it to open up and say "aaaahhhh".
Walter
alawi
Thank you for responding; this work-around works for ULs, but not for
nested divs. Do you know what to do in that case? Give this a try:
<html>
<head>
<style>
.item { padding:10px;border:1px solid black;background-color:#ACE; }
.list { padding:10px;padding-left:20px; }
.null { min-height:0px; height: 0px; background-color:#FFF;}
</style>
</head>
<body>
<div id="monkey">
<div class="item">Item 1<div class="list"><div class="null"></
div><div class="item">Item 2<div class="list"><div class="null"></
div></div></div></div></div>
<div class="item">Item 3<div class="list"><div class="null"></div></
div></div>
<div class="item">Item 4<div class="list"><div class="null"></div></
div></div>
</div>
<script>
Sortable.create("monkey", {tag:"div", only:["item"], treetag:"div",
tree:true});
</script>
</body>
</html>
-- alawi
Walter Lee Davis
because this example is so abstract. There are some CSS-3 selectors
that might help you here -- only-child or something like that. Or, you
might want to just re-write this as a UL containing DIVs:
<ul>
<li><div></div></li>
</ul>
I have done that a lot in sortables, and it works very nicely. I don't
see any ids in your example here. I don't think this will be sortable
without them, or at least you won't be able to save the sort anywhere
persistent.
Walter