7

我在使用html5拖放时遇到了一点问题。我看不出有什么简单的办法摆脱它。基本上我有一些“盒子”，里面有一些其他的html元素。父框是可拖动的，它们可以相互放置。

我在正文上绑定dragover事件以处理整个页面上的拖放。问题是，当您拖动框时 - 有时会在子元素上触发事件，而父元素根本不会收到此事件。

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

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

谢谢你的想法

我在代码中所做的简短版本：

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

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


}, false);

但在我的情况下，子元素几乎占据了整个 '.candrophere' 框，因此事件几乎永远不会在正确的目标上触发（尤其是当我更快地移动鼠标时）

4

2 回答 2

16

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

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

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

到您的 CSS，并将is-drag-in-progress类添加到处理程序中的body元素onDragStart（并在拖动结束时将其删除）。这将防止子元素干扰父元素上的拖动事件。

于 2013-03-05T05:31:12.950 回答
1

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

由于 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');
}
于 2012-09-20T10:00:54.203 回答