首页 > 解决方案 > 在开始拖动和拖动中更改光标

问题描述

如何在 HTML5 的不同拖放(startDrag 和 dragOver)事件中更改光标样式?

我做了一些测试,但我做不到。有人可以帮忙吗,谢谢。

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" >

标签: javascriptcsshtml

解决方案


推荐阅读