1

How can I change the cursor style in different drag-and-drop (startDrag and dragOver) events in HTML5?

I did some testing, but I could not. Can someone help, thanks.

const elementDiv1 = document.getElementById('div1');
const elementDrag1 = document.getElementById('drag1')

elementDiv1.addEventListener("drop", drop);
elementDiv1.addEventListener("dragover", allowDrop);
elementDrag1.addEventListener("dragstart", drag);

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");
  ev.target.appendChild(document.getElementById(data));
}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#drag1 {
    cursor: url(https://i.imgur.com/2Lc66bn.png), auto;
}
<div id="div1"></div>
<img id="drag1" src="https://i.imgur.com/2Lc66bn.png" draggable="true" >
Cláudio Hilário
  • 127
  • 5
  • Please describe what you are trying to do. We cannot read your brain. We need the information about what you want to achieve and what is happening instead – yunzen Mar 01 '19 at 08:27
  • Change the cursor style in the startDrag and DragOver events – Cláudio Hilário Mar 01 '19 at 08:30
  • Possible duplicate of [HTML5 Drag & Drop Change icon/cursor while dragging](https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging) – Strelok Mar 01 '19 at 08:44
  • Maybe it can helps you : https://developer.mozilla.org/fr/docs/Web/API/Document/drag_event A similar question have also been asked there : https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon-cursor-while-dragging Maybe you can find a solution with that. – Rob Cime Mar 01 '19 at 08:27

0 Answers0