Question

I am using knockoutjs with the jquery drag & drop and it works well in Chrome, Firefox, IE9 but not IE8. I can’t post the actual code but I created a jsfiddle example where the bug can be reproduced. Please take a look http://jsfiddle.net/wired1/P9hns/20/
It works great in the latest Firefox, Chrome and IE9. However in IE8 when attempting to drag I get the following error:

IE8 error #1

SCRIPT5007: Unable to get value of the property ‘options’: object is null or undefined
jquery-ui.1.8.18.js, line 1412 character 13

Here is the referenced code in jquery ui:

$.ui.plugin.add("draggable", "cursor", {
start: function(event, ui) {
    var t = $('body'), o = $(this).data('draggable').options;
    if (t.css("cursor")) o._cursor = t.css("cursor");
    t.css("cursor", o.cursor);
},
stop: function(event, ui) {

        var o = $(this).data('draggable').options;
        if (o._cursor) $('body').css("cursor", o._cursor);

}
});

It is the declaration of variable o in the stop function: var o = $(this).data(‘draggable’).options;

If I comment out those two lines in jquery ui I get the following error:

IE8 error #2

SCRIPT5007: Unable to get value of the property ‘options’: object is null or undefined
jquery-ui.1.8.18.js, line 1439 character 38

That points to:

$.ui.plugin.add("draggable", "scroll", {
start: function(event, ui) {
    var i = $(this).data("draggable");
    if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset();
},
drag: function(event, ui) {

    var i = $(this).data("draggable"), o = i.options, scrolled = false;
........................

It is the last line from the above snippet where o = i.options.

If I set {scroll: false} as an option for the jqueryui draggable the error goes away, but it still won’t work.

It seems that as I start to drag all events fire in order one after the other even though the mouse click was not released (when running the code test in jsfiddle look at the console to see the logs).

Is it a jquery ui issue or am I doing something wrong? Any help with this is greatly appreciated.

Answer 1

The problem is that you removed the student from your observableArray in the ‘start’ callback, which in turn causes KO to remove/detach the associated DOM element. But the code for draggable is counting on the dragged element to still be available (even if you specify a helper).

I’m guessing that IE<9 handles the detached element differently, causing the error to surface. It can be solved by only removing the student from the observableArray when the associated draggable element is definitely no longer needed (i.e. when dragging has stopped).

Here’s the updated fiddle: http://jsfiddle.net/P9hns/32/