Drag and Drop (Swap) Values in LWC

Hello Salesforce Ohana!, today we will discuss Drag and Drop (Swap) Values in LWC. Drag and Drop features enhance user experience by allowing seamless reordering or swapping of items, providing a more intuitive and engaging interface. By incorporating Drag and Drop functionality into your Lightning Web Components, you’re not just creating a more interactive interface; you’re empowering users to customize their experience and streamline their workflow.

Also, check this: Use deleteRecord in LWC Salesforce

Key Highlights :

1. Intuitive User Interface: Enable users to rearrange items effortlessly with simple drag and drop actions.
2. Enhanced Interactivity: Provide a more engaging user experience by allowing users to interact directly with the application interface.
3. Customizable Behavior: Tailor the drag and drop functionality to match your application’s specific requirements and design aesthetics.

Code :

dragswap.HTML:

<template>
	<div class="columns">
		<div class="card card1" draggable="true" data-id="card" ondragstart={handleDragStart}
			ondragenter={handleDragEnter} ondragover={handleDragOver} ondragleave={handleDragLeave} ondrop={handleDrop}
			ondragend={handleDragEnd}>A</div>
		<div class="card card2" draggable="true" data-id="card" ondragstart={handleDragStart}
			ondragenter={handleDragEnter} ondragover={handleDragOver} ondragleave={handleDragLeave} ondrop={handleDrop}
			ondragend={handleDragEnd}>B</div>
		<div class="card card3" draggable="true" data-id="card" ondragstart={handleDragStart}
			ondragenter={handleDragEnter} ondragover={handleDragOver} ondragleave={handleDragLeave} ondrop={handleDrop}
			ondragend={handleDragEnd}>C</div>
	</div>
</template>

dragswap.JS:

import { LightningElement } from 'lwc';

export default class Dragswap extends LightningElement {
    draggingClass = 'dragging';
    dragSource;

    connectedCallback() {
    }

    handleDragStart(evt) {
        this.dragSource = event.target;
        console.log(event.target.innerHTML);
        evt.target.classList.add(this.draggingClass);
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('text/html', this.dragSource.innerHTML);
    }

    handleDragOver(evt) {
        evt.dataTransfer.dropEffect = 'move';
        evt.preventDefault();
    }

    handleDragEnter(evt) {
        this.classList.add('over');
    }

    handleDragLeave(evt) {
        this.classList.remove('over');
    }

    handleDrop(evt) {
        evt.stopPropagation();
        console.log('test', this.dragSource);
        if (this.dragSource !== event.target) {
            this.dragSource.innerHTML = event.target.innerHTML;
            event.target.innerHTML = evt.dataTransfer.getData('text/html');
        }

        evt.preventDefault();
    }

    handleDragEnd(evt) {
        let columns = this.template.querySelectorAll(`[data-id="card"]`);
        Array.prototype.forEach.call(columns, (col) => {
            ['over', 'dragging'].forEach((className) => {
                col.classList.remove(className);
            });
        });
    }
}

dragswap.JS-meta.css:

.columns {
  margin :0 auto;
  background: lightgrey;
  width: 800px;
  padding: 20px;
}

.card{
  width: 32%;
  display: inline-block;
  margin-right: 1.2%;
  height: 120px;
  font-size: 50px;
  background: deeppink;
  border: 3px solid deeppink;
  box-sizing: border-box;
  color: white;
  line-height: 120px;
  vertical-align: middle;
  text-align: center;
}

.card3{
  margin-right: 0;
}
  
.card2{
  background: dodgerblue;
  border-color: dodgerblue;
}
  
.card3{
  background: darkturquoise;
  border-color: darkturquoise;
}
  
.dragging{
  opacity: 0.5;
}
    
.over{
    border: 3px dashed black;
}

dragswap.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. HTML Drag and Drop
2. LWC