带有子节点的拖放区域

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/