function readOnly(count){ }
Don't have an account?
Search for an answer or ask a question of the zone or Customer Support.
You need to sign in to do that
Sign in to start searching questions
Signup for a Developer Edition
Sign in to start a discussion
You might need to add mobile events as well like ontouch, ontouchstart.
https://w3c.github.io/touch-events/#event-touchstart
http://www.javascriptkit.com/javatutors/touchevents.shtml
Please mark as Best Answer if above information was helpful.
Thanks,
<template>
<div class="slds-p-around_x-small">
<div class="slds-grid slds-grid_vertical">
<div class="slds-scrollable slds-grow">
<div class="slds-scrollable_none">
<table class=" slds-table slds-no-row-hover slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" >
<thead>
<tr class="slds-line-height_reset">
<th>Order Number</th>
<th>Customer Name</th>
<th>Area</th>
<th>Slot of Delivery</th>
<th>Delivery Type</th>
</tr>
</thead>
<tbody>
<template for:each={selectedContactRows} for:item="ord" for:index="index">
<tr
key={ord.Id}
onchange={Change}
draggable="true"
ondrop={Drop}
ondragstart={DragStart}
ondragover={DragOver}
title={index}
>
<td role="gridcell">
<div class="slds-cell-wrap" title={index}>{ord.OrderNumber}</div>
</td>
<td role="gridcell">
<div class="slds-cell-wrap" title="Client Name">{ord.Customer_Name__c}</div>
</td>
<td role="gridcell">
<div class="slds-cell-wrap" title="Area">{ord.BillingCity}</div>
</td>
<td role="gridcell">
<div class="slds-cell-wrap" title="Delivery Time">{ord.Delivery_Day_Slot__c}</div>
</td>
<td role="gridcell">
<div class="slds-cell-wrap" title="Delivery Method">{ord.Order_Delivery_Method__c}</div>
</td>
</tr>
</template>
</tbody>
</table>
<div slot="footer">
<lightning-button title="Allocate Orders to Driver" label="Allocate Selected Orders" variant="brand" onclick={updateOrderRowAction}></lightning-button>
</div>
</div>
</div>
</div>
</div>
</template>
-------------------------------------
JS:-
import { LightningElement,api,track } from 'lwc';
import fetchOrderRecord from '@salesforce/apex/lwcAppOrderApex.fetchOrderRecord';
import findRecords from '@salesforce/apex/lwcAppOrderApex.findRecords';
import formFactorPropertyName from '@salesforce/client/formFactor';
import updateMultipleOrderRecord from '@salesforce/apex/lwcAppOrderApex.updateMultipleOrderRecord';
export default class DragNDrop extends LightningElement {
@track records;
@track error;
@track selectedRecord;
@api index;
@api relationshipfield;
@api iconname = "standard:user";
@api objectName = 'User';
@api searchfield = 'Name';
@api userID;
//@api displayFields = 'Name';
@track searchKey;
@api selectedContactRows=[];
DragStart(event) {
this.dragStart = event.target.title;
console.log(event.target.title);
event.target.classList.add("drag");
}
DragOver(event) {
event.preventDefault();
return false;
}
Drop(event) {
debugger;
event.stopPropagation();
const DragValName = this.dragStart;
const DropValName = event.target.title;
console.log('DragValName-='+DragValName);
console.log('DropValName-='+DropValName);
if (DragValName === DropValName) {
console.log('equal');
return false;
}
const index = DropValName;
const currentIndex = DragValName;
const newIndex = DropValName;
console.log('index-='+index);
console.log('currentIndex-='+currentIndex);
console.log('newIndex-='+newIndex);
//Array.prototype.move = function (from, to) {
//this.splice(to, 0, this.splice(from, 1)[0]);
//};
Array.prototype.move = function (currentIndex, newIndex) {
this.splice(newIndex, 0, this.splice(currentIndex, 1)[0]);
};
console.log('---selectedContactRows1---'+JSON.stringify(this.selectedContactRows));
this.selectedContactRows.move(currentIndex, newIndex);
console.log('---selectedContactRows---'+JSON.stringify(this.selectedContactRows));
//console.log(this.ElementList);
this.selectedContactRows = this.selectedContactRows;
}
updateOrderRowAction(){
debugger;
if(this.userID==null){
alert('Please Select the Driver');
}
else{
console.log('----this.selectedContactIdList---'+JSON.stringify(this.selectedContactRows));
console.log('----this.this.userID===---'+JSON.stringify(this.userID));
console.log('----this.this.userID===---'+this.userID);
updateMultipleOrderRecord({conObj: JSON.stringify(this.selectedContactRows), usrID: this.userID})
.then(()=>{
this.template.querySelector('lightning-datatable').selectedContactRows=[];
})
.catch(error =>{
this.errorMsg =error;
window.console.log('unable to update the record due to ' + JSON.stringify(this.errorMsg));
});
window.location.href = 'https://dropsgroup--train.lightning.force.com/lightning/n/Order_List';
}
}
handleChange(event){
debugger;
/* eslint-disable no-console */
console.log('Search Event Started '+searchKey);
const searchKey = event.target.value;
/* eslint-disable no-console */
event.preventDefault();
const searchEvent = new CustomEvent(
'change',
{
detail : searchKey
}
);
console.log('----22222222--- '+searchKey);
this.dispatchEvent(searchEvent);
}
handleOnchange(event){
//event.preventDefault();
debugger;
console.log('----searchKey----'+searchKey);
const searchKey = event.detail.value;
//this.records = null;
/* eslint-disable no-console */
console.log(searchKey);
/* Call the Salesforce Apex class method to find the Records */
findRecords({
searchKey : searchKey,
objectName : this.objectName,
searchField : this.searchfield
})
.then(result => {
this.records = result;
for(let i=0; i < this.records.length; i++){
const rec = this.records[i];
this.records[i].Name = rec[this.searchfield];
}
this.error = undefined;
//console.log(' records ', this.records);
})
.catch(error => {
this.error = error;
this.records = undefined;
});
}
handleventcall(event){
this.userID = event.detail.recordId;
const searchVal = event.detail.recordId;
console.log('searchVal-='+JSON.stringify(searchVal));
}
handleOnchange(event){
//event.preventDefault();
const searchKey = event.detail.value;
//this.records = null;
/* eslint-disable no-console */
//console.log(searchKey);
/* Call the Salesforce Apex class method to find the Records */
findRecords({
searchKey : searchKey,
objectName : this.objectName,
searchField : this.searchfield
})
.then(result => {
this.records = result;
for(let i=0; i < this.records.length; i++){
const rec = this.records[i];
this.records[i].Name = rec[this.searchfield];
}
this.error = undefined;
//console.log(' records ', this.records);
})
.catch(error => {
this.error = error;
this.records = undefined;
});
}
handleSelect(event){
const selectedRecordId = event.detail;
/* eslint-disable no-console*/
this.selectedRecord = this.records.find( record => record.Id === selectedRecordId);
/* fire the event with the value of RecordId for the Selected RecordId */
const selectedRecordEvent = new CustomEvent(
"selectedrec",
{
//detail : selectedRecordId
detail : { recordId : selectedRecordId, index : this.index, relationshipfield : this.relationshipfield}
}
);
this.dispatchEvent(selectedRecordEvent);
}
handleRemove(event){
event.preventDefault();
this.selectedRecord = undefined;
this.records = undefined;
this.error = undefined;
/* fire the event with the value of undefined for the Selected RecordId */
const selectedRecordEvent = new CustomEvent(
"selectedrec",
{
detail : { recordId : undefined, index : this.index, relationshipfield : this.relationshipfield}
}
);
this.dispatchEvent(selectedRecordEvent);
}
@api getShowContainer = false;
showContainerData(event){
this.getShowContainer = true;
console.log('getShowContainer # ' + this.getShowContainer);
}
hideContainerData(event){
this.getShowContainer = false;
}
@api getShowContainers = false;
showContainerDatas(event){
this.getShowContainers = true;
console.log('getShowContainers # ' + this.getShowContainers);
}
hideContainerDatas(event){
this.getShowContainers = false;
}
}
-----
See only the JS code related to drag and drop
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>false</isExposed>
<targets>
<target>lightning__FlowScreen</target>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
<target>lightningCommunity__Page</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<supportedFormFactors>
<supportedFormFactor type="Small" />
</supportedFormFactors>
</targetConfig>
<targetConfig targets="lightning__AppPage">
<supportedFormFactors>
<supportedFormFactor type="Small" />
</supportedFormFactors>
</targetConfig>
<targetConfig targets="lightning__HomePage">
<supportedFormFactors>
<supportedFormFactor type="Small" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>