当在可排序列表中拖动时，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. 将accordiondiv设置为accordion

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

此功能有效;在IE> 7, Chrome, Firefox等，它都工作得很好。另一方面，在<= IE7中，将手风琴拖到另一个列表中会导致它占用空间，但在拖动其他元素之前不可见。

这是一个相当奇怪的错误，甚至可以通过jQuery UI演示页面看到。抓住一个元素并拖动它;它应该消失，直到另一个被移动。至少，这就是它在这里所做的。

奇怪的是，删除样式表完全解决了IE7及以下版本的问题。应用到页面上的唯一样式是默认的jQuery UI生成的CSS(在我的例子中是Redmond主题)。

我想知道的是我们可以做些什么来修复这种行为?不幸的是，我被要求以IE7为目标，所以它必须被支持。

Answer 1

我自己也遇到过这个问题。原来这是一个"hasLayout"bug。由于某些原因，在IE7中，拖拽的可排序项失去了它的hasLayout状态。解决方法是在上面强制布局。

.ui-sortable li {
  zoom:1;
}

其中li是实际被排序的元素。可以是一个div，一个表的tr或者在你的情况下的任何东西。或者您可以简单地向这些项添加一个类并使用它(sortable不会自动向这些项添加任何类)。

如果这对你不起作用，我把它应用到所有事情上:

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

(h3是我的句柄排序)