How to prevent dragging image from one cell to another cell on TypeScript Spreadsheet?

This article explains how to prevent the dragging image from one cell to another cell on the TypeScript Spreadsheet.

You can prevent the dragging image by protecting the sheet and unlocking the used range. In this sample, the image was inserted on the desired cell using the insertImage() method, and the used range was unlocked using the lockCell property in the created event.

[HTML]

<div id="spreadsheet"></div>

[TS]

import { Spreadsheet, getRangeAddress, SheetModel } from '@syncfusion/ej2-spreadsheet';

import * as dataSource from './default-data.json';

 

    //Initialize Spreadsheet component

    let spreadsheet: Spreadsheet = new Spreadsheet({

        sheets: [

            {

                name: 'Sheet 1',

                isProtected: true, // Set as true to protect the sheet.

                protectSettings: { selectCells: true }, // Allows you to select the cells in the protect sheet.

                ranges: [{ dataSource: (dataSource as any).defaultData }],

                columns: [

                    { width: 102 }, { width: 102 }, { width: 100 }, { width: 110 },

                    { width: 100 }, { width: 100 }

                ]

            }],

        created: (): void => {

            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');

            // Method for insert image to the A1 cell

            spreadsheet.insertImage(

                [

                    {

                        src: 'https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-spreadsheet.png',

                        height: 100,

                        width: 100,

                    },

                ], 'A1'

            ); 

            let sheet: SheetModel = spreadsheet.getActiveSheet();

            // Get the used range to unlock the cells

            let address = getRangeAddress([ 0, 0, sheet.usedRange.rowIndex, sheet.usedRange.colIndex ]); 

            // For unlock the used range cells

            spreadsheet.lockCells(address, false); 

        }

    });

    spreadsheet.appendTo('#spreadsheet');

Output