Question

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

dragenter：改变div border color
dragleave：恢复为原始div边框颜色

在Firefox 35（Ubuntu）上，当div有滚动条（水平或垂直）并且通过滚动条移动文件时，我有以下事件：

dragenter：越过div border
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

移动div滚动条时，Firefox会触发拖动事件

1 个答案: