带有子节点的拖放区 [英] drag and drop zone with child nodes

问题描述

我有一个带有多个子节点的拖放区.

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

主要元素具有 dropenter 和 dropleave 事件.但是，如果将文件拖到主元素内的子节点上，则会触发 dropleave .

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.

如何处理它，以便仅当拖动的元素和鼠标位于主要元素之外时才调用 dropleave ?

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

推荐答案

添加此CSS

.drop * {
    pointer-events:none;
}

这是一个小提琴 http://jsfiddle.net/b7pgbhva/

这篇关于带有子节点的拖放区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！