#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: | ||
| Blocked by: | Blocking: |
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 (8)
comment:1 Changed 11 years ago by
comment:3 Changed 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
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 11 years ago by
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
comment:5 Changed 11 years ago by
| Milestone: | 1.9 → 1.8.20 |
|---|
comment:7 follow-up: 8 Changed 9 years ago by
Hi there.
I tried to use draggable on web component, using shadow DOM. By essence, shadow DOM is not really in DOM. Therefore, the following test in draggable always fails:
_mouseStop: function() { ... if ( this.options.helper !$.contains( this.element[ 0 ].ownerDocument, this.element[ 0 ] ) ) { return false; } ...
It prevent stop event (and thus all drag'n drop operation) to be fired)
comment:8 Changed 9 years ago by
Replying to feugy:
I tried to use draggable on web component, using shadow DOM.
This is clearly a separate issue, and jQuery doesn't currently support shadow DOM.
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.