Question

当您在浏览器屏幕上拖动文件时，图像会出现在鼠标光标的一侧，即Windows默认图像。此图片类似于Copy，Move和Forbide。见底部。

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

Answer 1

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

$(".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>

Answer 2

您可以使用jquery通过css更改光标的属性来更改光标图像。

function ondrag(event) { 
    $('body').css('cursor', 'wait'); 
}

您可以在此处检查各种光标属性。 http://www.w3schools.com/cssref/pr_class_cursor.asp

如果要将光标替换为自定义图像，可以使用： https://github.com/Webbrother/jquery.change-cursor

Answer 3

如果您想将可拖动限制在某个区域，

尝试使用＆＃34;收容＆＃34;选项：

http://docs.jquery.com/UI/Draggable#option-containment

Answer 4

你可以用jquery draggable

来做

以下是我所做的预览

mToolbar.setBackgroundResource(mGameEnum.getPrimeColorRes());

 $( ".your_image" ).draggable({
 
      drag: function() {
    	 $(".your_image").css("cursor","url(https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/actions/move.png), auto");
      },
      stop: function() {
      
           	 $(".your_image").css("cursor","url(https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Copy.png), auto");
      }
    });

.your_image{
  height:100px;
  width:100px;
  background-color:red;
  cursor:url(https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Copy.png), auto;
}

如何使用JQuery

4 个答案: