8
下面是我的頁面的基本HTML結構：問題與嵌套的jQuery sortables
<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>
如：
- 根元素
- 一級一
- 級別一架B
- Level One parent
- 第二層次一
- 等級兩親
- 三級一
- 等級三級乙
- 等級兩個B
- 等級一種C
可能有任何數量的項目位於根目錄之後的每個縮進級別，但只會有3個級別，並且每個級別只有一個父級（即：根目錄中始終只有3個<ul>，但數字的<li> s是可變的）。
我允許用戶使用jQuery UI Sortable插件重新排序此結構。要添加新項目，有三組項目（第一級項目，第二級項目，第三級項目），它們在頁面上與這棵樹相鄰。用戶可以從那裏拖動到列表中添加它 - 但它必須添加到相應的級別。
我有這方面的工作已經在使用draggable與connectToSortable選項：
$('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級項目將被添加到可排序。嘗試對已經存在的二級或三級項目之一進行排序，使得它能夠拾取整個「一級家長」李並將整個過程移動。
有什麼可以想到的，這將使這項工作在Firefox，但不是IE瀏覽器？你能想出一個不同的方式來處理這個問題嗎？
版本：火狐3.6，IE7，jQuery的1.3.2，jQuery UI的1.7.2
更新：
這裏有JSBin工作代碼：http://jsbin.com/ixabo/edit - 不出所料，這不是」 t在IE中工作，但我認爲這是JSBin的問題（「_console is undefined」）。要看到它半工作，也許複製/粘貼到本地文件，並在IE中打開它。
是否可以在http://www.jsbin.com上製作一個實例？ – Natrium 2010-02-08 07:30:50
明天當我回到辦公室時我會把它放在那裏......（只是你看，它會正常工作） – nickf 2010-02-08 14:35:29
@Natrium - 現在檢查鏈接。 – nickf 2010-02-08 23:37:39