Remove ui.draggable immediately after the drop callback still raises an error in IE

[sam]

A Similar error was reported (Ticket #4087) which seemed to resolve a problem in both Firefox and IE - however there is still an error occurring in IE. Firefox from what I can tell is happy.

jquery.1.3.2 jquery.ui.1.7.1 IE 7 (Complains) Firefox 3 (Happy)

Error can be created using:

$(document).ready(function() {

  function intDraggables() {
      $(".drag").draggable();
  }

  $(".drop").droppable({
      drop: function(event, ui) {	
          ui.draggable.remove();
      }
  });
});

Resulting error (in IE) reads:

'data(...).options' is null or not an object.

From minified code (ui.1.7.1)

   stop:function(b,c){var d=a(this).data("draggable").options;

Marked this ticket as blocker as I can find no other way to remove a draggable during drop without throwing an error in IE.

[Scott González]

Passing the plugin instance to the functions that $.ui.plugin.call executes may solve the problem. Alternatively, setting the context of those functions to the plugin instance instead of the element should solve the problem, but would require larger changes to every use of $.ui.plugin.

[Scott González]

Using setTimeout() for the removal should work around this.

[paul]

Fixed in r3103.

[martinkeimel]

Hi, I downloaded the mentioned version but the error is still occurring. What I did for solving this is the following:

1. Comment the lines added in the bug fix:

if the original element is removed, don't bother to continue

162 if(!this.element[0]

!this.element[0].parentNode)

163 return false;

2. Replace the lines 598-601, which used to contain:

stop: function(event, ui) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

for

stop: function(event, ui) {

if ($(this).data('draggable')) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

}

Is that alright? Hope this helps. Greetings, Martin K.

[graemeworthy]

I was having the same issue. I am using 1.7.2.

Martin K's fix worked for me. However, I had to patch jquery ui in two places, the one he recomended, as well as for 'opacity'

[m4olivei]

I was also having this issue. I am using 1.7 and applying martinkeimel's fix worked for me as well.

graemeworthy, what was the other patch that you needed? I'd like to see if it will apply to me in my application. Right now I'm not seeing any furthur problems after applying martinkeimel's fix.

Thanks, ~Matt

[zeta]

This bug happens because when you stop dragging the item, it tries to access the item's draggable properties/options, but the original item (the one been dragged) cannot be found. That's what happened to me.

To fix this in an upper level (your js code), you could use the setTimeout(function() { ... }, 1);

Otherwise, you could follow the steps posted by Martin K. But, I had to patch it in 3 different places. The place where Martin K specified, then the 'opacity' and 'zIndex'. To find these last 2 places just do a search in the file for:

stop: function(event, ui) {

var o = $(this).data('draggable').options;

if (o._cursor) $('body').css("cursor", o._cursor);

}

and you should be able to see them.

[mrgccc3]

Martin K, thanks that saved my life, testing for it's existence did the trick.

I've tested it in Chrome, IE, and Firefox and all work wonderfully. Granted only IE was the culprit prior.

[ebbergemann]

I just now saw this same issue occurring with me while using 1.8.10. It looks like this issue may crop up again from time to time. Below is a very simple workaround that I did:

I set it up to not do the remove on the "drop" function of the droppable but had it occur on the "stop" function of the draggable.

/*drop event on the droppable*/

ui.draggable.attr("removeme", "true");

/*stop event on the draggable*/

if ($(this).attr("removeme") == "true") {

$(this).remove();

}

I have tested this with IE8 and also FF 3.6.

With this change, if you have revert set to true on the draggable then it will animate the revert before removing the element.