4

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.

2
  • Vc tem que colocar dentro do ondragover.
    – Meu ovo
    4/03/2020 às 20:23
  • Verdade funcionou @Sam! eu estava esperando que quando o elemento fosse arrastado o cursor alterasse, mas pelo visto só troca realmente quando o mouse está passando por cima da área descartável. Eu encontrei isso no MDN: developer.mozilla.org/pt-BR/docs/Web/API/…. Mas muito obrigado!
    – marquinho
    5/03/2020 às 1:11

1 Resposta 1

0

Quando você arrasta um elemento, o cursor muda de acordo com a área onde ele será dropado. Por exemplo, quando o elemento passa sobre uma área não-dropável, o cursor mostra um ícone parecido com este 🚫, mas quando você move para uma área dropável, irá mostrar o ícone especificado no dropEffect, que por padrão já é o de mover, como na imagem abaixo:

inserir a descrição da imagem aqui

Esse ícone (cursor) pode variar de navegador (ex., navegadores MS mostram um ícone diferente).

Portanto, a propriedade dropEffect deve ser utilizada no evento ondragover e não no ondragstart, como sugere a documentação que mencionou:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .