html5:有没有办法防止孩子干扰拖拽事件

Question

我在html5拖放时遇到了一些问题.我没有看到一个简单的方法.基本上我有一些"盒子"里面有一些其他的html元素.父框是可拖动的,它们可以相互删除.

我dragover在主体上绑定事件来处理整个页面上的拖放.问题是,当你拖动框时 - 有时会在子元素上触发事件,父母根本不会得到此事件.

有没有一种简单的方法可以防止这种情况发生？

基本上我希望dragover事件在鼠标位于目标框区域时立即触发.我知道解决这个问题的几种方法,但它们真的很难看,我想知道是否有一些简单的东西.

谢谢你的想法

我在代码中做的简短版本:

document.addEventListener('dragenter', function(e) {

    if (e.target.className == 'candrophere')
        // cancel out "e" to allow drop


}, false);

但在我的情况下,子元素几乎占据了整个'.candrophere'框,因此事件几乎从未在正确的目标上被触发(特别是当我更快地移动鼠标时)

Answer 1

css pointer-events规则可防止鼠标交互事件在其应用的元素上触发,但IE目前不支持(http://caniuse.com/pointer-events).

我用于此问题的解决方法是添加类似的东西

.is-drag-in-progress .child-elements
{
    pointer-events:none;
}

到你的CSS,并将is-drag-in-progress类添加到处理程序中的body元素onDragStart(并在拖动结束时删除它).这将防止子元素干扰父元素上的拖动事件.

Answer 2

基本上我的解决方案如下：

由于 e.target 和 e.currentTarget 大多数时候无法与父框匹配 - 剩下要做的就是手动检查 e.target 是否是父框的子项。有很多方法可以做到这一点，但我使用的是自定义函数。不能在这里发布，因为它是基于我自己的框架，没有它就无法工作，但伪代码如下：

// target is a framework object (much like jquery)
closestDroppableParent = function(target)
{
    // i know that all children in those boxes will not be any deeper than this
    var max_levels = 5;

    while (target && max_levels > 0)
    {
        max_levels--;

        // droppable boxes have data-droptype attribute set so only other boxes with the same attribute
        // can be dropped on them. This check can be done any way you like. You can have a custom class
        // for droppable objects, check for draggable attribute etc...
        // .data() is a framework function that returns the value of the data-* attributes
        if (target.data('droptype'))
            return target;

        // .parent() is a framework function to get parent node
        target = target.parent();
    }

    return null;
}


// drag over event
dragOverEventHandler = function(e)
{
    // convert the element to its closest droppable parent
            // $() is much like jquery
    var closest = closestDroppableParent($(e.target));

    if (closest)
        closest.addClass('draggedOver');
}