Opened 11 years ago

Closed 11 years ago

Last modified 9 years ago

#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 tj.vantoll

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.

comment:3 Changed 11 years ago by TJ VanToll

Resolution: fixed
Status: newclosed

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 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

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

Milestone: 1.91.8.20

comment:6 Changed 10 years ago by mikesherov

#7000 is a duplicate of this ticket.

comment:7 Changed 9 years ago by feugy

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 in reply to:  7 Changed 9 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.