拖动子元素时父元素的“dragleave"触发 [英] 'dragleave' of parent element fires when dragging over children elements

问题描述

概述

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

<div id="dropzone-content"><div id="拖放"><div class="text">这是一些文本</div><div class="text">这是一个包含文本和图像的容器</div>

问题

当我将文件拖到

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

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

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

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

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

jsFiddle

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

问题

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

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

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

解决方案

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

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

var dragging = 0;attachEvent(window, 'dragenter', function(event) {拖动++；$(dropzone).addClass('drag-n-drop-hover');event.stopPropagation();event.preventDefault();返回假；});attachEvent(window, 'dragover', function(event) {$(dropzone).addClass('drag-n-drop-hover');event.stopPropagation();event.preventDefault();返回假；});attachEvent(window, 'dragleave', function(event) {拖着——；如果(拖动 === 0){$(dropzone).removeClass('drag-n-drop-hover');}event.stopPropagation();event.preventDefault();返回假；});

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

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

所以我选择了答案并将其应用于我的情况:

$.fn.dndhover = 函数(选项){返回 this.each(function() {var self = $(this);var 集合 = $();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 在上一个元素上触发 dragleave 事件* 在下一个上发射 dragenter 之前，所以我们引入了延迟*/设置超时(功能(){collection = collection.not(event.target);if (collection.size() === 0) {self.trigger('dndHoverEnd');}}, 1);});});};$('#dropzone').dndhover().on({'dndHoverStart':函数(事件){$('#dropzone').addClass('drag-n-drop-hover');event.stopPropagation();event.preventDefault();返回假；},'dndHoverEnd':函数(事件){$('#dropzone').removeClass('drag-n-drop-hover');event.stopPropagation();event.preventDefault();返回假；}});

这干净优雅，似乎在我测试过的所有浏览器中都能正常工作(还没有测试过 IE).

Overview

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>

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.

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. 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.

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

jsFiddle

Here's a jsFiddle to tinker with: http://jsfiddle.net/yYF3S/2/

Question

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.

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.

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.

解决方案

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.

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

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.

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

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

这篇关于拖动子元素时父元素的“dragleave"触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！