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

Question

当您将文件拖动到浏览器屏幕上时，会出现一个图像，位于鼠标光标的侧边，这是Windows默认图像。这些图像有不同的类型，如复制，移动和禁止。请参见下方。

我该如何使用JavaScript或JQuery更改鼠标指针的图像？例如，当我拖动文件并将鼠标移动到不可拖动区域时，禁止图像会显示在鼠标指针的一侧。请注意，需要保留HTML标签。

- Mohammad

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>

- ConnorsFan

Answer 2

你可以使用jQuery通过更改光标的属性来更改光标图像。

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

你可以在这里查看各种光标属性。 http://www.w3schools.com/cssref/pr_class_cursor.asp 如果您想使用自定义图像替换光标，则可以使用此选项： https://github.com/Webbrother/jquery.change-cursor

- Shashank

---

光标图像和拖动图像不同，我希望在拖动图像上没有光标图像。 - Mohammad

Answer 3

如果您想将可拖动的元素限制在特定区域内，

可以尝试使用“containment”选项：

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

- Bad Hombre

---

这是一个指向手册的链接。如果链接失效，内容可以在同一网站的另一页上找到，或者该技术已不再有用。 - mplungjan

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>

- Ankit vadariya