javascript - Firefox 在 div 滚动条上移动时触发拖动事件

Question

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

• dragenter:更改div边框颜色
• dragleave:恢复原始div边框颜色

在 Firefox 35 (Ubuntu) 上，当 div 有滚动条(水平或垂直)并且通过滚动条移动文件时，我会发生以下事件:

• dragenter:移过 div 边框
• dragenter:在滚动条上移动
• dragleave:离开滚动条

所以我在 div 中，但 Dragleave 已被触发，它取消了 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

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

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

A live demo at jsFiddle .