这是我的页面的基本
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中打开它.
