Eu estou querendo alterar entre os cursores copy
, move
ou link
quando um elemento arrastável for arrastado usando a propriedade dropEffect
ou seja quando o evento dragstart
ocorrer, mas ela não altera nada visualmente:
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
::selection {
background: transparent;
}
body {
background: rgb(164, 53, 229);
}
#container {
width: 620px;
height: 260px;
border: 2px solid #e2b72b;
margin: 50px auto 0 auto;
position: relative;
}
#drag, .drop {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: arial;
}
#drag {
background: #ffffff;
/* cursor: move; */
color: #000000;
position: absolute;
left: 0;
top: 0;
}
.drop {
background: #b3b3b385;
color: #ffffff;
position: absolute;
}
.drop:nth-of-type(1) {
left: 20px;
top: 20px;
}
.drop:nth-of-type(2) {
left: 140px;
top: 20px;
}
.drop:nth-of-type(3) {
left: 260px;
top: 20px;
}
.drop:nth-of-type(4) {
left: 380px;
top: 20px;
}
.drop:nth-of-type(5) {
left: 500px;
top: 20px;
}
.drop:nth-of-type(6) {
left: 20px;
top: 140px;
}
.drop:nth-of-type(7) {
left: 140px;
top: 140px;
}
.drop:nth-of-type(8) {
left: 260px;
top: 140px;
}
.drop:nth-of-type(9) {
left: 380px;
top: 140px;
}
.drop:nth-of-type(10) {
left: 500px;
top: 140px;
}
</style>
</head>
<body>
<div id="container">
<div class="drop">
<div id="drag" draggable="true"></div>
</div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
</div>
<script>
let drag = document.querySelector("#drag");
let drop = document.querySelectorAll(".drop");
drag.ondragstart = (event) => {
event.dataTransfer.dropEffect = "move";
event.dataTransfer.setData("text/plain", event.target.id);
}
for (i = 0; i < drop.length; i ++) {
drop[i].ondragover = (event) => {
event.preventDefault();
event.target.style.border = "3px dashed #33e0c9";
}
drop[i].ondragleave = (event) => {
event.target.style.border = "none";
}
drop[i].ondrop = (event) => {
let data = event.dataTransfer.getData("text");
if(event.target != document.querySelector(`#${data}`)){
event.preventDefault();
event.target.appendChild(document.querySelector(`#${data}`));
event.target.style.border = "none";
}
else {
event.target.style.border = "none";
}
}
}
</script>
</body>
</html>
Segundo o site do MDN Web Docs eles deixam bem claro o que essa propriedade vai fazer:
A propriedade dropEffect é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso hover) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.
E porque no caso do meu exemplo o cursor não está sendo alterado? eu testei essa propriedade com vários eventos de drag and drop e nos navegadores Chrome, Firefox, IE, Edge, Opera todos nas versões mais recentes, mas não funciona.
ondragover
.