function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Faizan Nusrat 27Faizan Nusrat 27 

Drag and Drop functionality of LWC not working on mobile but working fine on desktop. Please Suggest.

VinayVinay (Salesforce Developers) 
Hi Faizan,

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,
Forum TeamForum Team
Can you please share more details related to your query? It would be great if you could share your code as well.
Faizan Nusrat 27Faizan Nusrat 27
HTML:-
<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
Faizan Nusrat 27Faizan Nusrat 27
And this 

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