Ticket #8269 (closed bug: fixed)

Opened 3 years ago

Last modified 11 months ago

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:1 Changed 3 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:2 Changed 3 years ago by tj.vantoll

comment:3 Changed 3 years 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 3 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 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.20

comment:6 Changed 20 months ago by mikesherov

#7000 is a duplicate of this ticket.

comment:7 follow-up: ↓ 8 Changed 11 months 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 11 months ago by scott.gonzalez

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.