#8269 closed bug (fixed)

Opened April 22, 2012 10:53AM UTC

Closed April 30, 2012 04:39PM UTC

Last modified December 04, 2013 02:04PM UTC

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.

Attachments (0)

Change History (8)

Changed April 24, 2012 02:04AM UTC by tj.vantoll comment:1

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.

Changed April 25, 2012 02:50AM UTC by tj.vantoll comment:2

Pull request - https://github.com/jquery/jquery-ui/pull/639

Changed April 30, 2012 04:39PM UTC by TJ VanToll comment:3

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

Changed April 30, 2012 04:41PM UTC by Scott González comment:4

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

Changed April 30, 2012 04:42PM UTC by scottgonzalez comment:5

milestone:	1.9 → 1.8.20

Changed March 16, 2013 06:59PM UTC by mikesherov comment:6

#7000 is a duplicate of this ticket.

Changed December 04, 2013 02:02PM UTC by feugy comment:7

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)

Changed December 04, 2013 02:04PM UTC by scottgonzalez comment:8

Replying to [comment:7 feugy]: