Изменить курсор при перетаскивание drag html

Question

Подскажите пожалуйста, как можно изменить курсор, когда элемент перетаскивается и находиться над элементом, в который можно поместить перетаскиваемый элемент?

В mac os данный курсор называется copy.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var elem = document.getElementById(data);
  ev.target.appendChild(elem);
}

.drop {
  width: 100px;
  height: 100px;
  background: blue;
}

.drag {
  width: 50px;
  height: 50px;
  background: red;
  cursor: move!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag_elem" class="drag" draggable="true" ondragstart="drag(event);"></div>

Answer 1

Например, вставить ev.dataTransfer.dropEffect = "move";

function allowDrop(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var elem = document.getElementById(data);
  ev.target.appendChild(elem);
}

.drop {
  width: 100px;
  height: 100px;
  background: blue;
}

.drag {
  width: 50px;
  height: 50px;
  background: red;
  cursor: move!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag_elem" class="drag" draggable="true" ondragstart="drag(event);"></div>

БЛОГ НА HUSL

Изменить курсор при перетаскивание drag html

Ответы (1 шт):