Ticket #4088 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

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

Reported by: bohdan.ganicky Owned by:
Priority: major Milestone: 1.8.14
Component: ui.droppable Version: 1.6rc6
Keywords: Cc:
Blocking: Blocked by:

Description (last modified by rdworth) (diff)

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

Change History

comment:1 Changed 5 years ago by bohdan.ganicky

  • Description modified (diff)

comment:2 Changed 5 years ago by rdworth

  • Description modified (diff)

comment:3 Changed 5 years ago by rdworth

  • Description modified (diff)

comment:4 Changed 5 years ago by paul

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in r2062. Thanks!

comment:5 Changed 4 years ago by Skaffen

  • Status changed from closed to reopened
  • Resolution fixed deleted

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 :).

comment:6 Changed 4 years ago by 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?

comment:7 Changed 4 years ago by scott.gonzalez

  • Priority changed from critical to major

comment:8 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.7 to 1.9

comment:9 Changed 3 years ago by 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

comment:10 Changed 3 years ago by gnarf

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

comment:11 Changed 3 years ago by Scott González

  • Status changed from reopened to closed
  • Resolution set to fixed

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

comment:12 Changed 3 years ago by 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

comment:13 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.14
Note: See TracTickets for help on using tickets.