Cannot attach event listeners to a dropzone using .addEventListener method

July 17, 2022

I am building a simple Drag N drop application demo,draggable was supposed to be dragged over dropzone and could be left there.

it is here, https://jsfiddle.net/yuzhangoscar/em4ns5v7/2/

The problem I am having is:

I cannot attach callback functions dragoverHandler and dropHandler to element dropzoneOne via .addEventListener()

The code snippet would work if I had attached dragoverHandler and dropHandler as attributes directly to the HTML element dropzone, e.g. ondrop="dropHandler(event)"

Can anyone help?

    const draggableOne = document.getElementById('draggable-1');
    const dropzoneOne = document.getElementById('dropzone-1');

    function dragstartHandler(event) {
        console.log('start');
        event.dataTransfer.setData('text/plain', event.target.id);
        event.currentTarget.style.backgroundColor = 'yellow';
    }

    function dragoverHandler(event) {
        console.log('dragging over');
        event.preventDefault();
    }

    function dropHandler(event) {
        console.log('dropped');
        const id = event.dataTransfer.getData('text/plain');
        const draggableElement = document.getElementById(id);
        event.target.appendChild(draggableElement);
        event.dataTransfer.clearData();
    }

    draggableOne.addEventListener('dragstart', dragstartHandler);
    dropzoneOne.addEventListener('ondragover', dragoverHandler);
    dropzoneOne.addEventListener('ondrop', dropHandler);

    .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
    }

    .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
    }

    .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
    }

    .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
    }

    <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div class="example-parent">
      <div class="example-origin">
        <div id="draggable-1" class="example-draggable" draggable="true">
          draggable
        </div>
      </div>
      <div class="example-dropzone">
        <div id="dropzone-1">
          dropzone
        </div>
      </div>
    </div>
    <script src="app.js"></script>
</body>

>Solution :

It should be "drop" and "dragover", not "ondrop" / "ondragover". Also, your drop area is rather small.

    const draggableOne = document.getElementById('draggable-1');
    const dropzoneOne = document.getElementById('dropzone-1');

    function dragstartHandler(event) {
        console.log('start');
        event.dataTransfer.setData('text/plain', event.target.id);
        event.currentTarget.style.backgroundColor = 'yellow';
    }

    function dragoverHandler(event) {
        console.log('dragging over');
        event.preventDefault();
    }

    function dropHandler(event) {
        console.log('dropped');
        const id = event.dataTransfer.getData('text/plain');
        const draggableElement = document.getElementById(id);
        event.target.appendChild(draggableElement);
        event.dataTransfer.clearData();
    }

    draggableOne.addEventListener('dragstart', dragstartHandler);
    dropzoneOne.addEventListener('dragover', dragoverHandler);
    dropzoneOne.addEventListener('drop', dropHandler);

    .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
    }

    .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
    }

    .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
    }

    .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
    }

     #dropzone-1 {
       min-height: 100px;
     }

    <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div class="example-parent">
      <div class="example-origin">
        <div id="draggable-1" class="example-draggable" draggable="true">
          draggable
        </div>
      </div>
      <div class="example-dropzone">
        <div id="dropzone-1">
          dropzone
        </div>
      </div>
    </div>
    <script src="app.js"></script>
</body>