jQuery可排序 - 有序列表 - IE9中的错误

Question

我正在使用带有2个Ordered List HTML元素的jQuery sortable。

首次加载页面时，第一个ol与转发器绑定，以向其添加项目。

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

由于这是一个有序列表，一旦用户“放弃”该项目，ol列表项目编号内的数字将自动更改为以数字方式排序。

以下是我的代码片段：

<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>

这在谷歌浏览器中运行良好，但在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所述。