Как изменить сторону изображения курсора на событие перетаскивания с помощью JQuery

Когда вы перетаскиваете файл на экране браузера, изображение отображается на стороне курсора мыши, который является образцом по умолчанию для Windows. Эти изображения различны, например, Copy, Move и Forbide. См. Его внизу.

Как я могу изменить сторону изображения курсора мыши на эти изображения с помощью javascript или JQuery? Например, когда я перетаскиваю файл и перемещаю мышь в нерастяжимой области, forbiden сторона отображения изображения курсора.

Ответ 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>

Ответ 2

Вы можете изменить изображение курсора, изменив свойство курсора на 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

Ответ 3

Если вы хотите ограничить перетаскивание в определенной области,

Попробуйте использовать опцию "сдерживание":

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

Ответ 4

Вы можете сделать это с помощью jquery draggable

Вот предварительный просмотр того, что я сделал

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