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

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:
enter image description here

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?

Best Answer

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);
});
Related Topic