Skip to main content

Search and Top Navigation

#8513 closed bug (notabug)

Opened August 21, 2012 06:03PM UTC

Closed August 21, 2012 06:09PM UTC

`dragenter` and `dragleave` events in parent DOM element conflict with nested DOM elements

Reported by: fguillen Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.core Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:
Description

Having this nested DOM elements:

<div id="drop">
  <div>drop here</div>
</div>​

I want to capture dragenter and dragleave in the whole #drop element so I can play with its CSS:

$("#drop").on( "dragenter", function() {
  $("#drop").addClass( "dragOver" );
});

$("#drop").on( "dragleave", function() {
  $("#drop").removeClass( "dragOver" );
});

The problem is that when I'm dragging over this element and my mouse arrives to the nested element the dragleave event is triggered so I lost my CSS behavior.

This behavior is completely non-consistent with other events like mouesenter and mouseleave which work properly with nested elements.

Another non-consistent behavior is that if I move out of the nested element again the dragenter event is not triggered, and I have to leave completely the outer element and go again into it so the dragenter event is triggered.

Check the jsFiddle example: http://jsfiddle.net/fguillen/473kH/ in this example you can play with the normal mouse events and check their behavior in comparison with the drag events.

StackOverflow thread: http://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements

Failing in:

  • Chrome OSX
  • Firefox OSX
  • Safari OSX
Attachments (0)
Change History (2)

Changed August 21, 2012 06:09PM UTC by scottgonzalez comment:2

resolution: → invalid
status: newclosed

This has nothing to do with jQuery UI. You're working with native drag events.