Question

I’m using jQuery sortable with 2 Ordered List HTML elements.

When the page first loads, the first ol is bound with a repeater to add items to it.

Then the user has the ability to drag and drop these items into the 2nd ol.

As this is an ordered list, once the user has “dropped” the item in place, the numbers within the ol list items numbers automatically change to be ordered numerically.

Here is a snippet of my code:

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

This works fine in Google Chrome, but in Internet Explorer 9 the numbers are all displaying “1”. This can be fixed by dragging and dropping any of the list items, but only when dropping them in the same place they were dragged from.

Heres an example of how it looks in Internet Explorer 9 (please ignore the red squiggles!).

Why is this happening and what fix can I put in place to prevent it?

Answer 1

This behavior may be caused by a regression error in Internet Explorer 9.

A possible workaround is to place your ordered lists into div elements and add an empty div element afterwards…

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

… as outlined in this similar post with an answer that describes a regression error in IE9.