JQuery UI аккордеон невидим в IE7 при перетаскивании в сортируемый список

Question

Хорошо, у нас есть простой неупорядоченный список, который выглядит следующим образом:

<ul id="list1" class="connectedSortable">
<li>
    <div id="accordion"><h3><a href="#">This is an accordion</a></h3><p>content</p></div>
</li>

И еще один неупорядоченный список, который выглядит следующим образом:

<ul id="list2" class="connectedSortable">
<li>Some item</li></ul>

Когдастраница загружается, мы делаем две вещи:

1. Соединяем два списка

   $(function() {
   $( "#list1, #list2" ).sortable({
       connectWith: ".connectedSortable"
   }).disableSelection();   });
   

2. Делаем гармошку в гармошку

   $(function() {
   $( "#accordion" ).accordion({
       collapsible: true,
   
   });});
   

Эта функциональность работает;в IE> 7, Chrome, Firefox и т. д. все работает отлично.В <= IE7, с другой стороны, перетаскивание аккордеона в другой список приводит к тому, что оно занимает место, но не отображается, пока другой элемент не перетаскивается. </p>

Это довольно странная ошибка, которая даже виднаперейдя на демонстрационную страницу jQuery UI .Возьмите элемент и перетащите его;он должен исчезнуть, пока другой не будет перемещен.По крайней мере, это то, что он делает здесь.

Странно то, что удаление таблиц стилей полностью решает проблему в IE7 и ниже.Единственный стиль, применяемый к странице - это сгенерированный по умолчанию jQuery UI CSS (тема Redmond в моем случае).

Что я хочу знать, что можно сделать, чтобы исправить это поведение?Я, к сожалению, обязан ориентироваться на IE7, поэтому он должен поддерживаться.

Answer 1

Я столкнулся с этим вопросом сам.Оказывается, это была ошибка hasLayout.По какой-то причине в IE7 перетаскиваемый сортируемый элемент теряет статус hasLayout.Исправление заключается в принудительном размещении макета на нем.

.ui-sortable li {
  zoom:1;
}

Где li - это фактический сортируемый элемент.Может быть div таблицы tr или что-то еще в вашем сценарии.Или вы можете просто добавить к ним класс и использовать его (сортируемый не добавляет к элементам автоматически какие-либо классы).

Если это не сработает для вас, я стал немного ядерным и применил его квсе:

.ui-sortable, .ui-sortable li, .ui-sortable h3 {
    zoom:1;
}

(h3 была моей ручкой для сортировки)