Why does the dropEffect property not work?

Asked

Viewed 50 times

4

I’m wanting to switch between cursors copy, move or link when a draggable element is dragged using the property dropEffect or when the event dragstart occur, but it changes nothing visually:

Example:

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

According to the website of MDN Web Docs they make it very clear what this property will do:

The dropEffect property is used to control the return (usually visual) that is given to the user during a drag and drop operation. It affects which cursor the browser will show while the drag is performed. For example, when the user passes over (famous Hover) the drop point (drop target), the browser cursor can indicate the type of operation that will happen.

And why in the case of my example the cursor is not being changed? I tested this property with several events of drag and drop and in the navigators Chrome, Firefox, IE, Edge, Opera all in the latest versions, but it doesn’t work.

javascript

  • You have to put inside the ondragover.

  • Truth worked @Sam! I was hoping that when the element was dragged the cursor would change, but apparently it only really changes when the mouse is passing over the disposable area. I found this on MDN: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29. But thank you very much!

1 answer

0


When you drag an element, the cursor changes according to the area where it will be dropped. For example, when the element passes over a non-dropable area, the cursor shows an icon that looks like this, but when you move to a dropable area, it will show the icon specified in the dropEffect, which by default is already moving, as in the image below:

inserir a descrição da imagem aqui

This icon (cursor) may vary from browser (e.g. MS browsers show a different icon).

Therefore, the property dropEffect should be used in the event ondragover and not in the ondragstart, as suggested by the documentation you mentioned:

...when the user passes over (famous Hover) the drop point (drop target) the browser cursor can indicate the type of operation that will happen.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.