Firefox在移动到div滚动条时触发拖动事件

Question

我想开发一个带有div和一些样式的文件拖放组件:

• dragenter：更改div边框颜色
• dragleave：还原为原始div边框颜色

在Firefox 35（Ubuntu）上，当div有一个滚动条（水平或垂直）并且在滚动条中移动文件时，我会发生以下事件：

< li>dragenter:移过div边框 < li>dragenter:在滚动条上移动 < li>dragleave:离开滚动条

所以我在div中，但是dragave已经被解雇了，它取消了div的新风格。我对Chromium没有这个问题。

有没有办法控制Firefox中的滚动条事件？

HTML:

<div id="appu">test-test-test-test-test-test-test-test-test-test-test-test</div>

CSS:

div#appu {
    height: 200px;
    width: 300px;
    border: 2px dotted black;
    overflow-x: auto;
    white-space: nowrap;
}

div#appu.over {
    border: 2px dotted red;
}

JavaScript:

$("#appu").on("dragenter", function(event) {
    console.log("dragenter");
    if (!$(this).hasClass("over")) {
        $(this).addClass("over");
    }
});

$("#appu").on("dragleave", function() {
    console.log("dragleave");
    if ($(this).hasClass("over")) {
        $(this).removeClass("over");
    }
});

http://jsfiddle.net/ag5vo9sb/

Answer 1

在拖拽处理程序中，您可以检查拖动来自哪个元素。如果源和目标相同，则无需执行任何操作。

$("#appu").on("dragleave", function(e) {
    if (e.relatedTarget === this) {return;} // Added this line
    if ($(this).hasClass("over")) {
        $(this).removeClass("over");
    }
});

jsFiddle的现场演示。