4

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?

1
  • I am facing the same issue, did you get solution?
    – gs650x
    Aug 8 '20 at 13:36
0

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);
});
1
  • Would you please explain this in little more detail, this is not working.
    – gs650x
    Aug 8 '20 at 13:39
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.