当在可排序列表中拖动时，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. 将手风琴div变为手风琴

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

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

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

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

我想知道的是可以采取哪些措施来解决这种问题？不幸的是，我需要以IE7为目标，因此必须得到支持。

Answer 1

我自己遇到了这个问题。原来这是一个“hasLayout”错误。由于某些原因，在IE7中拖动的可排序项目失去了hasLayout状态。修复是强制布局。

.ui-sortable li {
  zoom:1;
}

li是要排序的实际元素。可以是div表tr或您方案中的任何其他内容。或者你可以简单地为这些添加一个类并使用它（sortable不会自动为项添加任何类）。

如果这对你不起作用，我会有点核并将它应用于所有事情：

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

（h3是我可以排序的句柄）