Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
3 views
in Web Technology by (20.3k points)

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

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 div red when dragging something there. This works, but if you drag into the p child, the dragleave is fired and the div isn't red anymore. Moving back to the drop div also doesn't make it red again. It's necessary to move completely out of the drop div and drag back into it again to make it red.

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

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

1 Answer

0 votes
by (40.7k points)

You just have 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 like this:

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: http://jsfiddle.net/HU6Mk/163/

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...