嵌套jQuery sortables的问题

这是我的页面的基本 HTML结构：

<div id="selectedItemsTop">
    <ul>
        <li>
            Root element
            <ul>
                <li>Level One a</li>
                <li>Level One b</li>
                <li>
                    Level One parent
                    <ul>
                        <li>Level Two a</li>
                        <li>
                            Level Two parent
                            <ul>
                                <li>Level Three a</li>
                                <li>Level Three b</li>
                            </ul>
                        </li>
                        <li>Level Two b</li>
                    </ul>
                </li>
                <li>Level One c</li>
            </ul>
        </li>
    </ul>
</div>

例如：

>根元素

>一级a
>一级b
>一级父母

>二级a
>二级父母

>三级a
>三级b

>二级b

>一级c

在每个缩进级别上可以有超过根的任何数量的项目,但是每个级别只有3个级别,并且每个级别只有一个父级(即：根目录下总是正好3个以上,但是< li> s是可变的).

我允许用户使用jQuery UI Sortable插件重新排序此结构.要添加新项目,有三组项目(第一级项目,第二级项目,第3级项目),它们位于此树的页面上.用户可以从那里拖动到列表中来添加它 – 但必须在相应级别添加它.

我有这个工作已经使用connectToSortable选项draggable：

$('ul.availableItems').each(function(i) {
    var selector = "#selectedItemsTop > ul";
    for (var j = 0; j <= i; ++j) { // count from 0 to [0,1,2]
        selector += " > li > ul";
    }
    // eg: selector == "#selectedItemsTop > ul > li > ul"
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul"
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul > li > ul"
    $(this)
        .find('li')
        .draggable({
            connectToSortable : selector
        })
    ;
});
$('#selectedFieldsTop > ul > li ul').sortable();

正如我所说,这适用于除了IE之外的所有内容.一级物品可以完美地工作,但是不会将2级或3级物品添加到可分类物品中.尝试对已经存在的2级或3级项目中的一项进行排序,使其获得整个“一级父级”项目并移动整个项目.

有什么你能想到的可以使这个工作在Firefox而不是IE吗？你能想出一个不同的方法来处理这个问题吗？

版本：Firefox 3.6,IE7,jQuery 1.3.2,jQuery UI 1.7.2

更新：
这是JSBin上的工作代码：http://jsbin.com/ixabo/edit – 不出所料,它在IE中不起作用,但我认为这是JSBin的问题(“_console未定义”).要看到它半工作,可能复制/粘贴到本地文件并在IE中打开它.

解决方法

你能使用其他插件吗？ jsTree做得很好.