I have a sortable nested list (with Sortable.tree) and it''s beautiful;
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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
In CSS, give the UL a min-height or (for IE only) height property, and 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 On Mar 1, 2007, at 11:21 PM, alawi wrote:> > I have a sortable nested list (with Sortable.tree) and it''s beautiful; > 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 > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Walter,
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
On Mar 2, 12:09 pm, Walter Lee Davis
<w...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:> In CSS, give the UL a min-height or (for IE only) height property, and
> 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
>
> On Mar 1, 2007, at 11:21 PM, alawi wrote:
>
>
>
> > I have a sortable nested list (with Sortable.tree) and it''s
beautiful;
> > 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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
What is the purpose of the .null here? I''m a bit perplexed, probably 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 On Mar 3, 2007, at 12:08 AM, alawi wrote:> > Hi Walter, > > 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 > > > On Mar 2, 12:09 pm, Walter Lee Davis <w...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: >> In CSS, give the UL a min-height or (for IE only) height property, and >> 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 >> >> On Mar 1, 2007, at 11:21 PM, alawi wrote: >> >> >> >>> I have a sortable nested list (with Sortable.tree) and it''s >>> beautiful; >>> 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 > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---