Is there any difference or advantage of using drag and drop events and mouse events?

Asked

Viewed 90 times

2

<!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>
        body {
            background: #dddddd;
        }

        ::selection {
            background: transparent;
        }

        #container {
            width: 300px;
            height: 100px;
            border: 1px solid #919191;
            padding: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #drag, #drop {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-family: arial;
            color: #505050;
        }

        #drag {
            background: #ffffff;
            cursor: pointer;
        }

        #drop {
            border: 1px solid #919191;
            position: absolute;
            right: 30px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="drag" draggable="true">Drag</div>
        <div id="drop">Drop</div>
    </div>

    <script>
        let drag = document.querySelector("#drag");
        let drop = document.querySelector("#drop");

        drag.ondragstart = (event) => {
            event.dataTransfer.setData("div", event.target.id);
        }

        drop.ondragover = (event) => {
            event.preventDefault();
        }

        drop.ondrop = (event) => {
            let draggableDice = event.dataTransfer.getData("div");

            event.preventDefault();
            drop.innerHTML = "";
            drop.appendChild(document.querySelector(`#${draggableDice}`));
        }
    </script>
</body>
</html>

In the above example I use the property dataTransfer and its methods together with the events of drag and drop to carry out a drag and drop, but the same result I have if using only mouse events:

<!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>
        body {
            background: #dddddd;
        }

        ::selection {
            background: transparent;
        }

        #container {
            width: 300px;
            height: 100px;
            border: 1px solid #919191;
            padding: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #drag, #drop {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-family: arial;
            color: #505050;
        }

        #drag {
            background: #ffffff;
            cursor: pointer;
        }

        #drop {
            border: 1px solid #919191;
            position: absolute;
            right: 30px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="drag" draggable="true">Drag</div>
        <div id="drop">Drop</div>
    </div>

    <script>
        let drag = document.querySelector("#drag");
        let drop = document.querySelector("#drop");

        drag.onmousedown = () => {
            drop.onmouseenter = () => {
                drop.innerHTML = "";
                drop.appendChild(drag);
            }
        }
    </script>
</body>
</html>

Is there any difference or advantage between using one and the other?

javascript
  • 3

    Fundamental [Dit] the post and reduce the problem to a [mcve] with a specific question. The Stack Overflow Survival Guide in English can help you better understand our model.

  • I just placed these two steps of code for you to see how much to reduce code without using the methods of dataTransfer and the drag and drop events.

  • Yes I have read the rules of the site, but in my question I reduced the code and left more understanding as possible. The questions are related the doubts of the question itself both are not different. I do not see why you have closed my question.

  • 3

    Some remarks: the question was already reopened almost 10 minutes BEFORE that comment. This kind of "campaign" to reopen is not the way to solve things, the community reopens by content, either by the analysis queue and not simply by what is being asked. In the specific case I reopened by being with the two examples and you have left the question more objective, and mainly by not being "Helpdesk question". Whenever you want an open post, just follow the guide and make posts relevant to the community as a whole, which the rest usually happens.

  • Thank you! @Bacco :)

1 answer

0


There is a lot of difference, because in your second example (using mouse events) it does not work. You are creating a false effect drag-and-drop.

See: when you click on the div "drag" you trigger the event onmousedown and within it creates another event listener onmouseenter. Even without dragging this div to the div "drop", the listener was created and as soon as the mouse, at any time, pass over the div "drop", the event will be triggered onmouseenter causing the div "drag" to be transferred into it, even though it was not dragged there

In the first example, the drag and drop feature works properly, that is, the div "drag" will only be inserted in the div "drop" if it is actually dragged there.

You must use the events of drag & drop and not mouse to drag elements.

  • True! good observation, vlw!

Browser other questions tagged javascript

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