Ticket #8269 (closed bug: fixed)
Removing draggable element on drop : a(this).data("draggable") is undefined
| Reported by: | jiliwi | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8.20 |
| Component: | ui.droppable | Version: | 1.8.19 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$( "#containsDraggable span" ).draggable();
$( "#toMe" ).droppable(
{
drop: function( event, ui )
{
$("#containsDraggable").remove();
}
});
});
</script>
</head>
<body>
<div id="containsDraggable">
<span> Move me! </span>
</div>
<div id="toMe"> Here. </div>
</html>
The message "a(this).data("draggable") is undefined" is visible under Firefox.
Change History
comment:2 Changed 13 months ago by tj.vantoll
Pull request - https://github.com/jquery/jquery-ui/pull/639
comment:3 Changed 13 months ago by TJ VanToll
- Status changed from new to closed
- Resolution set to fixed
Draggable: Don't run stop methods for elements that have been removed. Fixed #8269 - Removing draggable element on drop : a(this).data("draggable") is undefined.
Changeset: 27d10235539e0f5baad6ee7e8d3d91cab65e2cfd
comment:4 Changed 13 months ago by Scott González
Draggable: Don't run stop methods for elements that have been removed. Fixed #8269 - Removing draggable element on drop : a(this).data("draggable") is undefined. (cherry picked from commit 27d10235539e0f5baad6ee7e8d3d91cab65e2cfd)
Conflicts:
ui/jquery.ui.draggable.js
Changeset: f0c3cf6f1a623e7e6aa19c182b2b61c783a3bfc3


I can confirm that this occurs in master - http://jsfiddle.net/2DMUW/2/. And it happens in all browsers, this isn't specific to Firefox. As a workaround you can call ui.draggable.remove() in the drop callback before removing the parent node.
The core issue is this block in the _mouseStop method of jquery.ui.draggable.js:
//if the original element is removed, don't bother to continue if((!this.element[0] || !this.element[0].parentNode) && this.options.helper === "original") return false;Issues occur if the stop methods are called on a node that is no longer on the DOM (which is what is happening here). This appears to be the code to keep that from happening. In this situation this.element and its parent both exist, but its grandparent doesn't. I believe that block should change to ensure the node is actually on the DOM. I'll work on a pull request for this.