Вложенный список Sortable JQuery не работает в IE, а в FF - PullRequest
Новая
       25

Вложенный список Sortable JQuery не работает в IE, а в FF

4 голосов
/ 18 ноября 2009

Хотя я довольно часто использую этот сайт в качестве ресурса для проблем, связанных с jQuery, я не могу найти ответ на этот раз. Итак, вот мой первый пост.

В дневное время на работе я разрабатываю информационную систему для генерации документов MS Word. Один из модулей, который я разрабатываю, предназначен для определения выбора главы по умолчанию для оглавления и выбора текстов по заданным главам. Пользователь может отправить новые главы и, если необходимо, добавить их в качестве дочерней главы к родителю, пометить их как «принять в оглавление» и связать текст по умолчанию (из другого модуля) с главой.

Мой список глав рекурсивно получен из таблицы MySQL и может выглядеть примерно так: 

<ul class="sortableChapterlist">
  <li>1</li>
  <li>2
    <ul class="sortableChapterlist">
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3
        <ul class="sortableChapterlist">
          <li>2.3.1</li>
          <li>2.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

В FireFox код работает как шарм, но IE (7), похоже, не очень нравится. Я могу правильно перетаскивать только главные главы. При попытке перетащить подглаву, независимо от ее уровня, соответствующая основная глава поднимается с каким-то дочерним элементом, а не со всеми.

Это код jQuery, который я использую для выполнения задачи: 

$(function(){
  $(".sortableChapterlist").sortable({
    opacity: 0.7,
    helper:  'clone',
    cursor:  'move'
  });

  $(".sortableChapterlist").selectable();
  $(".sortableChapterlist").disableSelection();
});

У кого-нибудь есть идеи по этому поводу? Я предполагаю, что IE вроде бы падает через ссылку на несколько классов "chapter_list" в сочетании с jQuery, пытающимся обработать перетаскиваемый / сортируемый.

Ответы [ 3 ]

3 голосов
/ 19 ноября 2009

Полагаю, вы могли бы исправить это, применив сортируемый элемент root <ul>, а не все из них в дереве. Это работает во всех браузерах, которые я тестировал, но, к сожалению, приводит к чуть менее плавному восприятию, так как позиция, в которой элемент будет вставлен после перетаскивания, «немного прыгает».

По сути это будет выглядеть так: 

<ul id="sortableNestedList" class="sortableChapterlist">
  <li>1</li>
  <li>2
    <ul class="sortableChapterlist">
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3
        <ul class="sortableChapterlist">
          <li>2.3.1</li>
          <li>2.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

$("#sortableNestedList").sortable({ ... });
2 голосов
/ 18 ноября 2009

Это длинный выстрел, но попробуйте заменить подчеркивание чем-то другим, например дефис. Подчеркивание используется, чтобы вызвать проблемы в некоторых браузерах.

Центр разработчиков Mozilla: Подчеркивает в именах классов и идентификаторов .

0 голосов
/ 05 мая 2011

Я нашел ответ здесь jQuery неожиданное сортируемое поведение работает очень хорошо.

...