jQuery Sortable - 有序列表 - IE9 中的错误

Question

我正在使用带有 2 个有序列表 HTML 元素的 jQuery 可排序。

当页面第一次加载时，第一个ol 绑定了一个转发器来添加项目。

然后用户可以将这些项目拖放到第二个ol。

由于这是一个有序列表，一旦用户将项目“放置”到位，ol 列表项目编号中的数字会自动更改为按数字排序。

这是我的代码的 sn-p：

<ol class="drop">
   <asp:Repeater ID="repQuestion1Answers" runat="server">
      <ItemTemplate>
          <li answerid="<%#eval("ID") %>"><%#Eval("Answer")%></li>
       </ItemTemplate>
       </asp:Repeater>
   </ol>
   <ol class="drop selected">
   </ol>

   <script type="text/javascript">
      $(function () {
         $("div.options.question1 ol.drop").sortable({
             connectWith: "div.options.question1 ol.drop"
         });

         $("div.options.question1 ol.drop.selected").sortable({
             connectWith: "div.options.question1 ol.drop"
            , update: function (event, ui) {
                  var $items = $(this).find("li");
                  var items = "";
                  $items.each(function () {
                      items = items + $(this).attr("answerid") + ",";
                  });
                  $(".txtQuestion1").val(items);
               }
          });

          $("div.options.question1 ol.drop").disableSelection();

     });
    </script>

这在 Google Chrome 中运行良好，但在 Internet Explorer 9 中，数字都显示为“1”。这可以通过拖放任何列表项来解决，但只有在将它们放置在它们被拖动的相同位置时。

这是它在 Internet Explorer 9 中的外观示例（请忽略红色曲线！）。

为什么会发生这种情况，我可以采取什么措施来防止这种情况发生？

Answer 1

此行为可能是由 Internet Explorer 9 中的回归错误引起的。

一种可能的解决方法是将有序列表放入 div 元素中，然后添加一个空的 div 元素...

<div id="first">
    <ol class="drop">
        <asp:Repeater ID="repQuestion1Answers" runat="server">
            <ItemTemplate>
                <li answerid="<%#eval("ID") %>"><%#Eval("Answer")%></li>
            </ItemTemplate>
        </asp:Repeater>
   </ol>
</div>

<div id="second">
    <ol class="drop selected">
    </ol>
</div>

<div id="empty"></div>

...正如similar post with an answer that describes a regression error in IE9 中所述。