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

Question

当您在浏览器屏幕上拖动文件时，图像会出现在鼠标光标的一侧，该图像是 windows 默认图像。此图像多种多样，例如 Copy、Move 和 Forbide。见其底部。

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

Answer 1

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

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

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

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

Answer 2

如果你想将draggables限制在某个区域，

尝试使用 "containment" 选项：

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

Answer 3

可以使用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 4

您可以使用 jquery 可拖动

这是我所做的预览

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <div class="your_image">
  
  </div>
</div>
<div class="log">

</div>

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

How to change image side of cursor on drag event using JQuery

javascript

jquery

mouse-cursor