Drag & Drop Functionality in Lightning Web Component (LWC) | how to drag and drop table rows in lightning web component -- LWC

Today I am working on Drag & Drop Functionality in Lightning Web Component (LWC)

➡ To know more details about Drag & Drop Functionality in LWC, Click Here.

draggerWebCmpLwc.html [Lightning Web Component]

<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Drag Account </h3> <template for:each={accounts.data} for:item="account" if:true={accounts.data} for:index="index"> <div class="slds-m-top--medium slds-m-bottom--x-small" key={account.id} draggable="true" data-item={account.Id} ondragstart={handleDragStart}> <div class="slds-p-around--medium lgc-bg"> <lightning-icon slot="media" class="slds-float--left slds-m-right--medium" icon-name="standard:account"></lightning-icon> <p class="slds-truncate"> Name: {account.Name}</p> <p class="slds-truncate"> Type: {account.Type}</p> </div> </div> </template> </lightning-card> </template>

draggerWebCmpLwc.js [JavaScript File]

import { LightningElement, wire } from 'lwc'; import getAccounts from '@salesforce/apex/accountCreationControllerLwc.getAccountList'; export default class DraggerWebCmpLwc extends LightningElement { @wire(getAccounts) accounts; handleDragStart(event){ event.dataTransfer.setData("account_id", event.target.dataset.item); } }

draggerWebCmpLwc.js-meta.xml [MetaData File]

<?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>

draggerWebCmpLwc.css [MetaData File]

.lgc-bg{background:#ddd; border:1px #ccc solid; padding: 5px; width:200px; border-radius: 10px; margin:5px;}

dropWebCmpLwc.html [Lightning Web Component]

<template> <lightning-card icon-name="standard:account" size="small" title="Account" ondrop={dropElement} ondragover={allowDrop}> <div style="text-align:center;"> {message}</div> <lightning-record-form if:true={accountId} record-id={accountId} object-api-name="Account" fields={fields}> </lightning-record-form> </lightning-card > </template>

dropWebCmpLwc.js [JavaScript File]

import { LightningElement, track } from 'lwc'; import NAME_FIELD from '@salesforce/schema/Account.Name'; import INDUSTRY from '@salesforce/schema/Account.Industry'; import PHONE from '@salesforce/schema/Account.Phone'; export default class DropWebCmpLwc extends LightningElement { fields = [NAME_FIELD, INDUSTRY, PHONE]; @track accountId; @track message = 'Drop an Account here'; dropElement(event){ this.accountId = event.dataTransfer.getData("account_id"); this.message=''; } allowDrop(event){ event.preventDefault(); } }

dropWebCmpLwc.js-meta.xml [MetaData File]

<?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>

accountCreationControllerLwc.cls [Apex Controller File]

public with sharing class accountCreationControllerLwc { //drag and drop @AuraEnabled(cacheable=true) public static List<account> getAccountList (){ List<account> accTypeList = [Select Id, Name, Type, Industry, AnnualRevenue From Account Where Type != null]; System.debug('accTypeList# ' + accTypeList); return accTypeList; } }

➡ To know more live demo in LWC, Use this link..