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

问题描述

概述

我有以下HTML结构，并附加了 dragenter 和拖曳事件到< div id =dropzone> 元素。

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

问题

拖动文件在< div id =dropzone> 之前， dragenter 事件按预期触发。但是，当我将鼠标移到一个子元素上时，例如< div id =drag-n-drop> ， dragenter 元素触发了< div id =drag-n-drop> 元素，然后 dragleave 元素元素

p>如果我再次将鼠标悬停在< 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> 元素...在元素的边界内的任何地方悬停/拖动不应触发拖曳事件

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

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

解决方案

我终于找到了一个解决方案我很高兴。我实际上发现了几种方法来做我想要的，但没有一个像现在的解决方案一样成功...在一个解决方案中，由于添加/删除边框到 #dropzone 元素...在另一个，如果你远离浏览器，边框永远不会被删除。

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

  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 所以我的柜台是关闭的。但是，它不是一个非常优雅的解决方案。

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

所以我采取了答案并将其应用于我的情况：

  $。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）{
 / * 
 * Firef ox 3.6在之前的元素
 *上触发dragleave事件，然后在下一个元素上触发dragenter，所以我们引入一个延迟
 * / 
 setTimeout（function（）{
 collection = collection 。不（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）。

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

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