JS Code for Drag & Drop Demo LWC | Event Handler

dragAndDrop.js

handleDragStart(event) {
  event.dataTransfer.setData('id', event.target.dataset.id);
  event.dataTransfer.setData('label', event.target.dataset.name);
}

handleDragOver(event) {
  event.preventDefault();
  event.currentTarget.style = 'background-color: pink; border-color:red;';
}

handleDragLeave(event) {
  event.preventDefault();
  event.currentTarget.style = 'background-color: rgb(255, 255, 255); border-color: rgb(201, 201, 201);';
}

handleDrop(event) {
  event.preventDefault();
  event.currentTarget.style = 'background-color: rgb(255, 255, 255); border-color: rgb(201, 201, 201);';

  const id = event.dataTransfer.getData('id');
  const label = event.dataTransfer.getData('label');
  const element = this.template.querySelector(`div[data-id="${id}"]`);
  element.remove();

  this.data.push({ id: id, label: label });
  this.data = JSON.parse(JSON.stringify(this.data));
}