drag and drop zone with child nodes

问题

I have a drag and drop zone with multiple child nodes.

The main element has dropenter and dropleave events. But if you drag a file inside the main element and over a child node, the dropleave is triggered.

How to handle it so the dropleave only is called when the dragged element and mouse is outside the main element?

http://jsfiddle.net/4cspcsc4/

<div class="drop">
    Drop here
    <div class="img"></div>
</div>

$('.drop').on('dragenter', function(e){
    $(this).addClass('highlight');
})
.on('dragleave', function(e){
    $(this).removeClass('highlight');
})

.drop {
    height:200px;
    width:200px;
    background:#aaa;
}

.drop.highlight {
    border:2px dashed black;
}

.img {
    height:100px;
    width:100px;
    background:red;
}

回答1:

Add this CSS

.drop * {
    pointer-events:none;
}

Here is a fiddle http://jsfiddle.net/b7pgbhva/

来源：https://stackoverflow.com/questions/27731945/drag-and-drop-zone-with-child-nodes