如何使用JQuery更改拖动事件上光标的图像侧

在浏览器屏幕上拖动文件时,图像出现在鼠标光标的一侧,即Windows默认图像.这个图像是各种各样的Copy,Move和Forbide.见底部.

如何使用javascript或JQuery将鼠标光标的图像侧更改为此图像？例如,当我拖动文件并在不可打开的区域中移动鼠标时,forbiden图像显示光标的一侧.

您可以使用事件的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;
}

Drag a file over each block 

    
Link
    
Move


    
Copy
    
None