Sortables: issue with parents swapping children with their siblings (nested sorting)

Sortables: issue with parents swapping children with their siblings (nested sorting)


What a dysfunctional family! ;]
I'm trying to shoot for a drag-and-drop layout manager using
sortables. Here's a simplified sketch of what my output might look
like:
<script type="text/javascript" SRC="contrib/
jquery-1.2.6.js"></script>
        <script type="text/javascript" SRC="contrib/UI/ui.core.js"></script>
        <script type="text/javascript" SRC="contrib/UI/ui.sortable.js"></
script>
        <style>
        #boxList li { background-color:Khaki;display:block;list-style-
type:none;float:left;margin:2px;border:1px solid black;padding:
5px;margin:5px;}
        </style>
        <script>
            $(document).ready(function() {
                $("#boxElement").sortable({cursor: "move", opacity:.8,
connectWith: ["ul"], items : "li" , dropOnEmpty:true });
            });
        </script>
<ul name="boxList" id="boxList">
    <li name="boxElement" id="boxElement">
        <ul name="boxList" id="boxList">
            <li name="boxElement" id="boxElement">
                <div style="float:left; width:335px;" class="box" ID="box_1"
name="box_1">
                    box #1
                </div>
            </li>
        </ul>
        <ul name="boxList" id="boxList">
            <li name="boxElement" id="boxElement">
                <div style="float:left; width:335px;" class="box" ID="box_2"
name="box_2">
                    box #2
                    <ul name="boxList" id="boxList">
                        <li name="boxElement" id="boxElement">
                            <div style="float:left; width:280px;" class="box" ID="box_3"
name="box_3">
                                box #3
                            </div>
                        </li>
                    </ul>
                    <ul name="boxList" id="boxList">
                        <li name="boxList" id="boxList">
                            <div style="float:left; width:280px;" class="box" ID="box_4"
name="box_4">
                                box #4
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>
Looking at this, box #3 and #4 are children. Their parent is box #2.
Box #1 box #2's sibling.
There is an unnamed grandparent, which is the opening <ul>.
It has no textual contents of its own, only children.
Box 3 and 4 sort fine within their parent.
Both parents also sort fine against each other.
ISSUE: If I attempt to drag box 3 or 4 to the parent sibling (box 1),
they instead stubbornly insist on moving to the grandparent, upon
which they seem to act as siblings of box #1 and #2.
This is technically fine on one level: I *should* be able to drag the
children to their grandparent, BUT, I also want to be able to drag
them into their parent's sibling, and be able to sort them there.
I've seen plenty of posts regarding nested sortables here, but haven't
found anything addressing this particular problem. Sorry if this is
redundant.
-Adam