Вот основная структура 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>
например:
- Корневой элемент
- Первый уровень
- Первый уровень b
- Уровень Один родитель
- Второй уровень
- Родитель второго уровня
- Уровень третий a
- Уровень третий b
- Второй уровень b
- Первый уровень c
На каждом уровне отступа после корня может быть любое количество элементов, но когда-либо будет только 3 уровня и только один родительский уровень (т. Е. Под корнем всегда ровно 3 <ul> s, но число <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 не будут добавлены в сортируемую. Попытка отсортировать один из предметов уровня 2 или 3, которые уже есть, заставляет его взять весь «Уровень один родительский» и переместить все это вокруг.
Есть ли что-нибудь, о чем вы могли бы подумать, чтобы это работало в Firefox, но не в IE? Не могли бы вы придумать другой способ справиться с этим?
Версии: Firefox 3.6, IE7, jQuery 1.3.2, jQuery UI 1.7.2
Update
Вот рабочий код на JSBin: http://jsbin.com/ixabo/edit - Неудивительно, что он не работает в IE, но я думаю, что это проблема с JSBin ("_console is undefined"). Чтобы увидеть его наполовину работающим, возможно, скопируйте / вставьте в локальный файл и откройте его в IE.