Проблема с вложенной JQuery sortables

Question

Вот основная 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> 

например:

• Корневой элемент
  • Level One
  • Level One б
  • Уровень один родитель
    • Уровень Два с половиной
    • Уровень Два родителя
      • Уровень Три
      • Уровень Три б
    • Уровень Два б
  • Level One с

Может быть любое количество элементов на каждом уровне отступа за корнем, но только 3 уровня и только один родитель на уровне (т. Е. Всегда существует точно 3 <ul> с под корнем, но число от <li> s является переменной).

Я разрешаю пользователю переупорядочить эту структуру, используя JQuery UI Sortable plugin. Чтобы добавить новый элемент, есть три группы элементов (элементы первого уровня, элементы уровня два, элементы уровня 3), которые примыкают на странице к этому дереву. Пользователь может перетащить оттуда в список, чтобы добавить его, но он должен быть добавлен на соответствующем уровне.

я это уже работает, используя 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 - Неудивительно, что она Безразлично» t работает в IE, но я думаю, что это проблема с JSBin («_console undefined»). Чтобы увидеть его полуфабрикат, возможно, скопируйте/вставьте его в локальный файл и откройте его в IE.

Answer 1

Можете ли вы использовать другие плагины? jsTree делает этот предмет очень хорошо.

Answer 2

Также были проблемы с сортировкой ранее: в моем случае был Аккордеон и сортировки внутри. Я не мог получить четкий ответ, но если вы посмотрите на любую из реализаций дерева, они используют drag-and-drop напрямую и не сортируются.

Основываясь на этом опыте - не очень точно знаю - я согласен с akiller и скажу: возьмите хороший плагин дерева, вместо того, чтобы пытаться сделать это самостоятельно с сортировкой. jsTree неплох и должен выполнять эту работу - есть и другие, если по какой-то причине jsTree не соответствует вашим потребностям.