This Post explains how to sort table rows by drag and drop in LWC. Below is the demo of output :
Drag_Drop_Sorting.html :
<template>
<div class="container">
<template for:each={ElementList} for:item="Elements">
<tr key={Elements.Id}>
<th
key={Elements}
style="padding:10px;background-color:#a6a5a3;"
class="Items"
onchange={Change}
draggable="true"
ondrop={Drop}
ondragstart={DragStart}
ondragover={DragOver}>
{Elements}
</th>
</tr>
</template>
</div>
</template>
Drag_Drop_Sorting.js
import { LightningElement, track } from 'lwc';
export default class Drag_Drop_Sorting extends LightningElement {
Data = [];
@track ElementList = ['1st : Apex Salesfore', '2nd : Lightning Web Component', '3rd :
Aura Component', '4th : Salesforce Admin', '5th : LoveSalesforceYes']
connectedCallback(){
if(!this.ElementList){
this.ElementList = [...this.Data]
}
}
Change(event){
this.Data = event.detail.join(', ');
}
DragStart(event) {
event.target.classList.add('drag')
}
DragOver(event) {
event.preventDefault()
return false
}
Drop(event) {
event.stopPropagation()
const Element = this.template.querySelectorAll('.Items')
const DragValName = this.template.querySelector('.drag').textContent
const DropValName = event.target.textContent
if(DragValName === DropValName){ return false }
const index = this.ElementList.indexOf(DropValName)
this.ElementList = this.ElementList.reduce((acc, curVal, CurIndex) => {
if(CurIndex === index){
return [...acc, DragValName, curVal]
}
else if(curVal !== DragValName){
return [...acc, curVal]
}
return acc
}, [])
Element.forEach(element => {
element.classList.remove('drag')
})
return this.ElementList
}
}
Drag_Drop_Sorting.Meta
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Thanks,
Lovesalesforceyes
