Unable to remove() ui.draggable (sortable item) immediately after the drop callback.

[bohdan.ganicky]

Originally reported by spiderling in this thread:
​http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/7537f702fa1ce21b

Expected behaviour:

// this should remove the dragged item after dropping it
drop: function(ev, ui) {
  ui.draggable.remove();
}

Actual behavior:
the draggable isn't removed

Workaround:

// this works
drop: function(ev, ui) {
  setTimeout(function() { ui.draggable.remove(); }, 1); // yes, even 1ms is enough
}

Testcase:
​http://jquery-ui.googlecode.com/svn/trunk/tests/visual/droppable/droppable_ticket_4088.html

Could be related to:
#4087

[paul]

Fixed in r2062. Thanks!

[Skaffen]

Unfortunately the fix hasn't worked for IE6/IE7/IE8 - I discovered this myself when using a mix of droppables and sortables and then found this bug report and also this thread where some other people have hit this problem: ​http://forum.jquery.com/topic/ie-won-t-remove-dropped-draggables

If I go to the test case linked from this ticket then the test works fine under Firefox but not under IE6, IE7 and IE8.

In my code if, in the drop event, I do the following:

ui.draggable.remove(); alert(ui.draggable[0].parentNode); alert(ui.draggable.parent().length);

On firefox I get "null" and then "0" alerted. On IE6 I get "[Object]" and then "0" alerted.

I believe under IE that when an element is removed from the page its parentNode doesn't become empty - looking at the jquery code regarding parents it looks like it maybe gets shoved into an orphaned document fragment, hence why the parent method in jquery does this check on the parent node type:

var parent = elem.parentNode; return parent && parent.nodeType !== 11 ? parent : null;

Thus the code in the fix for #4088 is, I think, doing the wrong check when it does this: if(!this._noFinalSort && this.currentItem[0].parentNode) this.placeholder.before(this.currentItem);

As I'm guessing currentItem is the item that's in ui.droppable in the drop event. That line of code should perhaps do something like: if(!this._noFinalSort && this.currentItem.parent().length>0) this.placeholder.before(this.currentItem);

Or alternatively it could have the same check on nodeType as jquery's parent method has.

I'm not a jquery/jqueryui expert, so I'm not sure if my suggested fix is the right way to do this, but that's my best guess :).

[Skaffen]

Should be a quick fix, but this has had no attention (perhaps because of the milestone being stuck on the original milestone it was deemed fixed on) - should I raise it as a new bug instead?

[k_borchers]

I believe Skaffen was correct. I have tested the change to sortable to check the parent.length() before updating the position of a removed element and it does seem to correct the issue. It does not appear to be a problem with droppable because calling remove on any element outside of the sortable from droppable's drop method works without the setTimeout workaround. I have submitted this bug fix in ​https://github.com/jquery/jquery-ui/pull/294

[Corey Frang]

Fiddled vs. git builds: ​http://jsfiddle.net/gnarf/Amyez/

[Scott González]

Merge pull request #294 from kborchers/bug_4088

Sortable: Changed to check the parent's length so that the dom position of the removed element is not updated. Fixed #4088 - Unable to remove() ui.draggable (sortable item) immediately after the drop callback.

Changeset: fe4ae3045810421d2489175739098deb6852417b

[kborchers]

Sortable: Changed to check the parent's length so that the dom position of the removed element is not updated. Fixed #4088 - Unable to remove() ui.draggable (sortable item) immediately after the drop callback. (cherry picked from commit 8e8a7b015f4f5a76c187dfca9af7519ae356bb16)

Changeset: ed65ce7a14882df12d2e029a4be84680a8b68240