Question

I am using jQuery sortable to allow users to rearrange <li> in a <ul> list. HTML only contains

<ul id="uisortable"></ul>

And the javascript contains this:

$(function() {
    $('#uisortable').sortable();
    $("#uisortable").disableSelection();
});

The items are added dynamically from JS and after adding the items, I’m calling

$(‘#uisortable’).sortable(“refresh”);

Everything works perfectly fine in FF, Opera and Webkit, but does not work at all in IE – any version, even IE 9. I tried adding activate option to the sortable like this:

$('#uisortable').sortable({
    activate: function() {
        throw("Start sorting");
    }
});

In IE 9 script debugger, I put a breakpoint on line throw("Start sorting") – but that line never activates. It seems like in IE the sortable is simply not attaching itself to the list.

I’m using jquery 1.4.2 with jquery UI 1.8.13.

Interestingly, jquery ui sortable demo page works fine, so it’s got to be something with my code – but how much further can I simplify it? Ok, I can – so I did. Instead of dynamically creating the items, I created them statically (for testing) in my HTML. I removed everything from the <li> except one line of text. Now my HTML looks like this:

<ul id="uisortable">
    <li class="sortitem">Item 1</li>
    <li class="sortitem">Item 2</li>
    <li class="sortitem">Item 3</li>
</ul>

With the above javascript code. Still, not working in IE. And no errors of any kind in the error console. Fine in FF, Webkit and Opera though. I’m totally stumped now. Any help is greatly appreciated.

Answer 1

Apparently, the problem was related to the jquery.ui version. I upgraded from 1.8.13 to 1.8.20 (much easier than upgrading jquery from 1.4.2 to 1.7.2) – and now it works!