Salesforce: Drag & Drop not working in lightning web components or drop events are not triggering

Question

I have a Lightning web component to drag one div into other dropzones (div). But the ondrop & ondragover events are not firing.

Here is my code

<template>

    <div class="draggable" draggable="true" ondragstart={dragged} ondragend={enddragged}>
        drag  item 1

    </div>

    <div  ondrop={dropped} class="droppable" ondragover={allowDrop}  >

        </div>
    <div  ondrop={dropped} class="droppable" ondragover={allowDrop}>

        </div>
    <div  ondrop={dropped} class="droppable" ondragover={allowDrop}  >

        </div>
    <div ondrop={dropped} class="droppable" ondragover={allowDrop} ondragenter={dragEnter} onmouseover={onhover}>

        </div>

and the js controller:

import { LightningElement } from 'lwc';

export default class LwcTestDragANDDrop extends LightningElement {

    constructor() {
        super();
        //register dragover event to the template
        //this.template.addEventListener('dragover', this.allowDrop.bind(this));
        console.log('constructor');
    }


    allowDrop(ev) {
        console.log('over drag ');
        ev.preventDefault();
    }

    dropped(ev) {                  
        console.log('on drop ');

        ev.preventDefault();
        /*let data = ev.dataTransfer.getData("text");
        console.log('strt drag ');*/
    }

    dragged(ev) {
        console.log('dragg start ');
        ev.dataTransfer.setData("Text", 'ev.target.id');
    }

    enddragged(ev) {
        console.log('dragg end ');
    }

    dragEnter(event) {
        console.log(12);
        event.target.style.border = "3px dotted red";
    }

    onhover(){
        console.log('on hover');
    }
}

And the rendered UI:

I wanted to drag the drag Item 1 to any of the below boxes.

The events ondrop={dropped} ondragover={allowDrop} are not firing. I have a requirement to use Firefox browser. Its working in Google chrome.

In raw JavaScript, the drag & drop is working. The only difference in LWC is the way of event binding

Am I missing anything? or not a proper HTML structure? how can I make it workable?

Answer 1

I am using plain web custom components. Running into same issue with drag and drop.

This might be a bug.

To make this work I have to wrap the dropzone in div with class called target and do:

const targets = document.querySelectorAll(".target");


 targets.forEach(target => {
   target.addEventListener("dragover", handle_ondragover);
   target.addEventListener("drop", handle_ondrop);
});

Answer 2

I have tested your code. Your code actually is working fine. But the divs you defined for drop area actually doesn't have width or height. So basically, the drop area is pretty much - nowhere. Once you define that with css, it is all working properly.