HTML5 dragleave fired when hovering a child element

javascript jquery html jquery-events drag-and-drop

2022-08-29 23:30:49

The problem I'm having is that the event of an element is fired when hovering a child element of that element. Also, is not fired when hovering back the parent element again.dragleavedragenter

I made a simplified fiddle: http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

with the following JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

What it is supposed to do is notifying the user by making the drop red when dragging something there. This works, but if you drag into the child, the is fired and the isn't red anymore. Moving back to the drop also doesn't make it red again. It's necessary to move completely out of the drop and drag back into it again to make it red.divpdragleavedivdivdiv

Is it possible to prevent from firing when dragging into a child element?dragleave

2017 Update: TL;DR, Look up CSS as described in @H.D.'s answer below that works in modern browsers and IE11.pointer-events: none;

答案 1

You just need to keep a reference counter, increment it when you get a dragenter, decrement when you get a dragleave. When the counter is at 0 - remove the class.

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

Note: In the drop event, reset counter to zero, and clear the added class.

You can run it here

答案 2

Is it possible to prevent dragleave from firing when dragging into a child element?

Yes.

#drop * {pointer-events: none;}

That CSS seem to be enough for Chrome.

While using it with Firefox, the #drop shouldn't have text nodes directly (else there's a strange issue where a element "leave it to itself"), so I suggest to leave it with only one element (e.g., use a div inside #drop to put everything inside)

Here's a jsfiddle solving the original question (broken) example.

I've also made a simplified version forked from the @Theodore Brown example, but based only in this CSS.

Not all browsers have this CSS implemented, though: http://caniuse.com/pointer-events

Seeing the Facebook source code I could find this several times, however it's probably used together with graceful degradation fallbacks. At least it's so simple and solves the problem for a lot of environments.pointer-events: none;