拖动子元素时触发父元素的“dragleave"

2022-01-11 00:00:00 file-upload drag-and-drop jquery html dom-events

我有以下 HTML 结构，我已将 dragenter 和 dragleave 事件附加到 <div id="dropzone">元素.

I have the following HTML structure and I've attached the dragenter and dragleave events to the <div id="dropzone"> element.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

问题

当我将文件拖到 <div id="dropzone"> 上时，dragenter 事件按预期触发.但是，当我将鼠标移到子元素上时，例如 <div id="drag-n-drop">，dragenter 事件会触发<div id="drag-n-drop"> 元素，然后为 <div id="dropzone"> 触发 dragleave 事件; 元素.

Problem

When I drag a file over the <div id="dropzone">, the dragenter event is fired as expected. However, when I move my mouse over a child element, such as <div id="drag-n-drop">, the dragenter event is fired for the <div id="drag-n-drop"> element and then the dragleave event is fired for the <div id="dropzone"> element.

如果我再次将鼠标悬停在 <div id="dropzone"> 元素上，则再次触发 dragenter 事件，这很酷，但是 <为刚刚离开的子元素触发code>dragleave事件，所以执行removeClass指令，不爽.

If I hover over the <div id="dropzone"> element again, the dragenter event is again fired, which is cool, but then the dragleave event is fired for the child element just left, so the removeClass instruction is executed, which is not cool.

这种行为存在问题的原因有两个:

This behavior is problematic for 2 reasons:

  1. 我只是附加 dragenter &dragleave 到 <div id="dropzone"> 所以我不明白为什么子元素也会附加这些事件.

  1. I'm only attaching dragenter & dragleave to the <div id="dropzone"> so I don't understand why the children elements have these events attached as well.

我仍然在 <div id="dropzone"> 元素上拖动，同时将鼠标悬停在其子元素上，所以我不想要 dragleave开火！

I'm still dragging over the <div id="dropzone"> element while hovering over its children so I don't want dragleave to fire!

jsFiddle

这里有一个 jsFiddle 可以修改:http://jsfiddle.net/yYF3S/2/

所以...我怎样才能做到这一点，当我在 <div id="dropzone"> 元素上拖动文件时，dragleave即使我拖过任何子元素也不会触发...它只会在我离开 <div id="dropzone"> 元素时触发...悬停/拖动元素边界内的任何位置不应触发 dragleave 事件.

So... how can I make it such that when I'm dragging a file over the <div id="dropzone"> element, dragleave doesn't fire even if I'm dragging over any children elements... it should only fire when I leave the <div id="dropzone"> element... hovering/dragging around anywhere within the boundaries of the element should not trigger the dragleave event.

我需要它是跨浏览器兼容的，至少在支持 HTML5 拖放的浏览器中，所以 这个答案 是不够的.

I need this to be cross-browser compatible, at least in the browsers that support HTML5 drag-n-drop, so this answer is not adequate.

Google 和 Dropbox 似乎已经解决了这个问题，但是他们的源代码被缩小/复杂，所以我无法从他们的实现中解决这个问题.

It seems like Google and Dropbox have figured this out, but their source code is minified/complex so I haven't been able to figure this out from their implementation.

推荐答案

我终于找到了我满意的解决方案.我实际上找到了几种方法来做我想做的事，但没有一个像当前的解决方案那样成功......在一个解决方案中，由于向 #dropzone 添加/删除边框，我经常遇到闪烁元素...在另一种情况下，如果您将鼠标悬停在浏览器之外，则永远不会删除边框.

I finally found a solution I'm happy with. I actually found several ways to do what I want but none were as successful as the current solution... in one solution, I experienced frequent flickering as a result of adding/removing a border to the #dropzone element... in another, the border was never removed if you hover away from the browser.

无论如何，我最好的 hacky 解决方案是这样的:

Anyway, my best hacky solution is this:

var dragging = 0;

attachEvent(window, 'dragenter', function(event) {

    dragging++;
    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragover', function(event) {

    $(dropzone).addClass('drag-n-drop-hover');

    event.stopPropagation();
    event.preventDefault();
    return false;
});

attachEvent(window, 'dragleave', function(event) {

    dragging--;
    if (dragging === 0) {
        $(dropzone).removeClass('drag-n-drop-hover');
    }

    event.stopPropagation();
    event.preventDefault();
    return false;
});

这很好用，但是在 Firefox 中出现了问题，因为 Firefox 是双重调用 dragenter 所以我的计数器关闭了.但尽管如此，它并不是一个非常优雅的解决方案.

This works pretty well but issues came up in Firefox because Firefox was double-invoking dragenter so my counter was off. But nevertheless, its not a very elegant solution.

然后我偶然发现了这个问题:如何在Firefox中检测到窗口外拖动时的dragleave事件

Then I stumbled upon this question: How to detect the dragleave event in Firefox when dragging outside the window

所以我把答案应用到我的情况:

So I took the answer and applied it to my situation:

$.fn.dndhover = function(options) {

    return this.each(function() {

        var self = $(this);
        var collection = $();

        self.on('dragenter', function(event) {
            if (collection.size() === 0) {
                self.trigger('dndHoverStart');
            }
            collection = collection.add(event.target);
        });

        self.on('dragleave', function(event) {
            /*
             * Firefox 3.6 fires the dragleave event on the previous element
             * before firing dragenter on the next one so we introduce a delay
             */
            setTimeout(function() {
                collection = collection.not(event.target);
                if (collection.size() === 0) {
                    self.trigger('dndHoverEnd');
                }
            }, 1);
        });
    });
};

$('#dropzone').dndhover().on({
    'dndHoverStart': function(event) {

        $('#dropzone').addClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    },
    'dndHoverEnd': function(event) {

        $('#dropzone').removeClass('drag-n-drop-hover');

        event.stopPropagation();
        event.preventDefault();
        return false;
    }
});

这是干净而优雅的，并且似乎在我迄今为止测试过的所有浏览器中都可以使用(还没有测试过 IE).

This is clean and elegant and seems to be working in every browser I've tested so far (haven't tested IE yet).

相关文章