зона перетаскивания с дочерними узлами

Question

У меня есть область перетаскивания с несколькими дочерними узлами.

Главный элемент имеет dropenter и dropleave события. Но если вы перетаскиваете файл внутри основного элемента и над дочерним узлом, запускается dropleave.

Как справиться с этим, так как dropleave вызывается только тогда, когда перетаскиваемый элемент и мышь находятся за пределами основного элемента?

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; 
} 

Answer 1

Добавить CSS

.drop * { 
    pointer-events:none; 
} 

Здесь скрипка http://jsfiddle.net/b7pgbhva/