1

Can you please tell me how you can change the cursor when the element is being dragged and be over the element where the dragged element can be placed?

On mac os, this cursor is named copy.

enter image description here

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>
Vector
  • 109
  • 5
  • Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=change+cursor+drag*+site:stackoverflow.com)<<<*** – mplungjan Sep 28 '21 at 08:22
  • @mplungjan Read the question, it's a completely different question ... – Vector Sep 28 '21 at 08:27
  • How different? Please elaborate if [this question](https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging) is not what you were looking for. I have reopened – mplungjan Sep 28 '21 at 08:38
  • https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed – mplungjan Sep 28 '21 at 08:53
  • Does adding `cursor: copy` to your `drop` class definition not do the job? – JohnP Sep 28 '21 at 09:57

0 Answers0