Drag and Drop to reorder table rows in Lightning Web Component Salesforce ☁️⚡️

In this video you will learn how to use Drag & Drop functionality in Lightning Web Component. We will use the Lightning Design System to create the UI for this and reorder table rows using Drag and Drop.
Please check the reference links below :
#DragandDrop #LWC #salesforce
Join me on Instagram : / iamkapilbatra
Blog : www.salesforce...
Website : www.salesforce...​​
LinkedIn : / salesforcebolt
Twitter : / salesforcebolt​​
Facebook : / iamsalesforcebolt

[@BlackGeare]

Hi, it's a really interesting video. I was able to apply your idea, but once the page is refreshed the changes are lost. How can I save changes to view them in a related list (QuoteLineItem) or in a list view?

[@SalesforceBolt]

Hi there,
One approach could be to store the position values in an object and fetch them on the load of your component to realign the positions again.

[@Richa-qd4uk]

Hi Kapil, does this work when we just want to drag and drop values between 2-3 input fields on a form? I am facing an issue with that, only the dragstart method is getting called. Most of the examples seem to be on table or iterator only.

[@SalesforceBolt]

Hi Richa, could you please elaborate the requirement so I can suggest a solution accordingly!

[@maneprashant1]

Hi,
Thanks for detailed information,
Can we Drag and Drop component or any DIV outside the salesforce or specifically into third party application,
Any suggestion.

[@SalesforceBolt]

Hi, while doing the drag and drop we are using dom elements. It’s just pure html and js so the answer is yes we can do the same in any other app as well !

[@maneprashant1]

@@SalesforceBolt Great to hear..!
thanks for quick response. can you pleas provide any document or content related to same.
Would be really healful. :)

[@iamkapilbatra]

@@maneprashant1 do you have any specific scenarios? Otherwise you may use same scripts anywhere.

[@maneprashant1]

@@iamkapilbatraI am using cargowise as a third party application system which is integrated with salesforce , now I want to drop email message record from salesforce to cargowise application.
Hope I am able to explain the scenario. :)

[@iamkapilbatra]

@@maneprashant1 what you are looking for is cross app integration where at one place you will start the drag and the other app is drop area. I am having another video on this channel for drag and drop using area, I would suggest you to checkout that as well.

[@Jorvic7]

I get it right, but trying to implement it in the org gives me this error in VS Code: " Unable to find Apex action class referenced as 'AccountController'. Thanks in advance

[@SalesforceBolt]

Hi there, for every video there is a blog post containing code in the description of it. Try to have the same code and run it again.

[@Jorvic7]

@@SalesforceBolt, Hello, thanks for answering, I'm very new to studying LWC programming and I didn't understand very well about creating a class, but the Trailhead community helped me, thanks anyway.

[@KrishanGopal-vg6ub]

Hi, Can you please suggest, how we can drag and drop table columns

[@SalesforceBolt]

Not sure about it, I will try to check and revert back.

[@SiddhantParashar]

After refresh the table return back to original, how to save that in that form.

[@SalesforceBolt]

This is expected behavior as we are just modifying it at client side. To save that same ordering you can make it server side!

[@DeepakKumar-mv6qz]

i want this functionality for mobile users....its not working for touchscreen phones....when dragging table cells with touch its not working

[@SalesforceBolt]

It's not suppose to work on mobile devices, for that you have to use touchmove and touchend event listeners!

[@DeepakKumar-mv6qz]

@@SalesforceBolt i tried all possible cases but it doesn’t work

[@harshaprasadsrustu98]

Hello Kapil Batra,
This is nice article. I am trying to learn this feature but not working for me. I here paste my code both HTML and js:
Please advise where I am doing wrong.




Account Name
Account Phone






{account.Name}


{account.Phone}






JS:
import { LightningElement, track } from 'lwc';
import getAccountRecords from '@salesforce/apex/ObjectControllerForDragAndDrop.getAccountRecords';
import { getDataConnectorSourceFields } from 'lightning/analyticsWaveApi';
export default class DragAndDrop extends LightningElement {
@track accountRecords = []; // If we dont use track here in UI we dont get updated values reason by default its reactive we have use it.
@track dragStart;
connectedCallback() {
this.retrieveAccountRecords();
}

retrieveAccountRecords(){
getAccountRecords()
.then(result => {
for(let accRecord = 0; accRecord < result.length; accRecord++){
this.accountRecords.push(result[accRecord]);
//console.log('accountRecords>>>>>', this.accountRecords);
}
})
.catch(error => {
// TODO Error handling
console.error('Error:', error.body.message);
});
}
dragInitiated(event){
this.dragStart = event.target.title;
event.target.classList.add("drag");
}
dragCompleted(event){
event.stopPropagation();
console.log('drag dropped');
return false;
}
dragDropped(event){
console.log('inside dragDropped');
//event.stopPropagation();
//console.log('querySelector>>>' + this.template.querySelector('drag').title);
const dragValname = this.dragStart;// this.template.querySelector('drag').title;
const dropValname = event.target.title;
if(dragValname === dropValname){
return false;
}
const currentIndex = dragValname;
const newIndex = dropValname;
Array.prototype.move = function(from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
}
this.accountRecords.move(currentIndex , newIndex);
}
}

[@SalesforceBolt]

Hey could you please check console and let me know if you are getting any error or warning there ?

[@harshaprasadsrustu98]

@@SalesforceBolt Hello Kapil,
Pain point is dragDrooped method in js file not getting called i tried placing console.log but not working and rest all methods are getting invoked
Please advise

[@SalesforceBolt]

@@harshaprasadsrustu98 seems like problem is not with the functionality, are you able to call any other function from that JS ?

[@harshaprasadsrustu98]

@@SalesforceBolt yeah all functions are getting invoked except dragDropped. Any mistake I am doing here please advise

[@reginaldstjulien2647]

Hello. Thank you for the detailed example. I am having issues and would like to know if you are free/willing to connect?

[@SalesforceBolt]

Hi there, could you please let me know the exact issue and scenario!

[@reginaldstjulien2647]

@@SalesforceBolt for some reason my accounts aren't rendering.. I only see {acc.Name} and {acc.Phone}. I see that my Apex method is being called with my debug logs.

[@SalesforceBolt]

@@reginaldstjulien2647 are you using the same code from the blog ? Could you please do console.log(JSON.Stringify(yourvalue)) in controller and see if you are getting values in it ?

[@reginaldstjulien2647]

@@SalesforceBolt it appears that my getAccList inside my connectedCallBack method is not getting called because I don't see "IN Method:" + error.body.message in my console. Although my system debug in my Apex class shows values being returned.