javascript - 突出显示 HTML 拖放中的放置区域

Question

我正在构建 Yet Another Drag'n'Drop File Uploader。我想要做的是在拖动开始时突出显示页面上的放置区域，以便用户知道将文件移动到哪里。 接口(interface)不会立即明确显示，这在这种情况下是需要的...

当用户已经在拖放区上方时突出显示拖放区很好，但这是用户正在拖动但尚未进入我希望收到通知的可拖放区域的时间。

我无法使用 dragstart 事件，因为它会在被拖动的 HTML 元素上触发，在这种情况下，它是来自用户桌面或其他东西的文件。我还尝试了以下方法:

$(document.body).on('dragenter', changeTheCSSClass)
                .on('dragleave', changeItBackAgain);

但是，进入和离开事件会针对光标经过的每个嵌套元素触发，因此我会收到大量事件，类会不断地来回切换。绝对不是我想要的。

有什么想法吗？

Answer 1

因为没有人发布任何东西，所以我发布了这个，既不稳定也不能 100% 工作，但有时工作。

changeback = 2;
changedback = true;
$(document)
    .off('dragenter dragleave')
    .on('dragenter', function (e) {
    setTimeout(function () {
        window.clearTimeout(changeback);
        changeback = 0;
        console.log('dragenter', e.target);
        if (changedback) document.getElementById('nav-askquestion').style.color = '#bc0000';
        changedback = false;
    }, 10);
})
    .on('dragleave', function (e) {
    console.log('dragleave', e.target);
    if (changeback == 0) {
        changeback = window.setTimeout(function () {
            console.log('changed back');
            document.getElementById('nav-askquestion').style.color = '#FFFFFF';
            changedback = true;
        }, 15);
    }
});

应用于此页面本身。此外，您还需要通过在 dragstart 上设置一些标志来取消内部拖动。

名称 dragenter 和 dragleave 看起来应该是 dragover 和 dragout :)

你那边怎么样了？