[jQuery] Sortables, new approach
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Arial;}
h1
{margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
page-break-after:avoid;
font-size:16.0pt;
font-family:Arial;
font-weight:bold;}
h2
{margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
page-break-after:avoid;
font-size:14.0pt;
font-family:Arial;
font-weight:bold;}
h3
{margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
page-break-after:avoid;
font-size:13.0pt;
font-family:Arial;
font-weight:bold;}
p.MsoHeader, li.MsoHeader, div.MsoHeader
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Arial;}
p.MsoFooter, li.MsoFooter, div.MsoFooter
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Arial;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p
{mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
font-size:12.0pt;
font-family:"Times New Roman";}
span.EmailStyle20
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
/* Page Definitions */
@page
{mso-endnote-separator:url("cid:header.htm\@01C6F8AA.2BFB0E00") es;
mso-endnote-continuation-separator:url("cid:header.htm\@01C6F8AA.2BFB0E00") ecs;}
@page Section1
{size:21.0cm 842.0pt;
margin:70.9pt 3.0cm 70.9pt 3.0cm;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>Stefan,
I have been silently admiring (and using) your work for a time and have to say
that it rocks! I will send you a link to a demo as soon as I finish what I am
working on. For the time being, I am actually quite interested in the nested
sortables functionality you have posted about. I have played around with the
early version example you have provided and have found a thing that probably
needs to be taken care of:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>There
is no way to drop an item A into another item B if item B does not already have
some children. That means that, right now, if all items are moved one by one
to, say, the same level as option 1, the sortable list will become a flat list
and there will be no way to create a nested list again.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>I can
think of two solutions to this shortcoming:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>1) Put
a <ul class="sortConatiner"> inside all items (even the ones
that have no children). You will probably need to make the <ul class="sortConatiner">
have a small height so that empty <ul class="sortConatiner"> accept
dropped items. The problem with this approach is that the height needed in empty
<ul class="sortConatiner"> might make the nested list look slightly
weird. Also, since the <ul class="sortConatiner"> will be shown
just bellow its parent item, it might be difficult for the user to
differentiate between an item being dropped <b><span style='font-weight:bold'>into</span></b>
another item and an item being dropped <b><span style='font-weight:bold'>bellow</span></b>
another item.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>2) Detect
the exact location of the dragged item with respect to the hovered item:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>If
the dropped item is near the top of the hovered item, show a horizontal line
above the hovered item and, if the dragged item is dropped, place the dropped
item as an elder brother of the hovered item,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>If
the dropped item is around the middle of the hovered item, temporarily color
the background of the hovered item and, if the dragged item is dropped, find or
create an inner <ul class="sortConatiner"> in the hovered item and
put the dropped item into it.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>If
the dropped item is near the bottom of the hovered item, show a horizontal line
bellow the hovered item and, if the dragged item is dropped, place the dropped
item as a younger brother of the hovered item.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>I
hope my explanations are not too confusing! Thanks for your efforts,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt'>Norbert.<o:p></o:p></span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/