javascript - 如何使用 JQuery 在拖动事件中更改光标的图像侧

Question

当您在浏览器屏幕上拖动文件时，图像会出现在鼠标光标的一侧，这是 Windows 默认图像。此图像有多种形式，如复制、移动 和禁止。见其底部。

如何使用 javascript 或 JQuery 将鼠标光标的图像侧更改为此图像？例如，当我拖动文件并将鼠标移动到不可拖动区域时，forbiden image display side of cursor.

Answer 1

您可以使用 dataTransfer.dropEffect dragover 事件的属性来设置光标旁边的小图像:

$(".targetDiv").on("dragover", function (event) {
    event.preventDefault();
    event.originalEvent.dataTransfer.dropEffect = "none"; // Shows the "forbidden" image
});

该属性的值为copy、move、link 和none。您可以在下面的代码片段中测试这些值。请注意，必须使用 originalEvent。根据我的测试，它在 Firefox 和 Chrome 中有效，但在 IE 中无效。

$(function () {
    $(".targetDiv").on("dragover", function (event) {
        event.preventDefault();
        event.originalEvent.dataTransfer.dropEffect = event.target.getAttribute("data-effect");
    });
});

.targetDiv
{
    display: inline-block;
    border: solid 1px black;
    width: 80px;
    height: 50px;
    margin: 4px;
    text-align: center;
    line-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Drag a file over each block </p>
<div>
    <div data-effect="link" class="targetDiv">Link</div>
    <div data-effect="move" class="targetDiv">Move</div>
</div>
<div>
    <div data-effect="copy" class="targetDiv">Copy</div>
    <div data-effect="none" class="targetDiv">None</div>
</div>