带子节点的拖放区域

Question

我有一个包含多个子节点的拖放区。

主元素有 dropenter 和 dropleave 事件。但是，如果您将文件拖到主元素内并拖到子节点上，则会触发 dropleave。

如何处理才能使 dropleave 仅在拖动的元素和鼠标位于主元素之外时调用？

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

这里是fiddlehttp://jsfiddle.net/b7pgbhva/

带子节点的拖放区域

drag and drop zone with child nodes

javascript

jquery

drag-and-drop