Ecme - The Ultimate Next & TypeScript Web Template

reorderDragable

reorderDragable function is used for reordering items within or across droppable areas in a drag-and-drop interface, using the DraggableLocation structure.

Example

import reorderDragable from '@/utils/reorderDragable';

const quoteMap = {
    list1: ['item1', 'item2', 'item3'],
    list2: ['item4', 'item5'],
};

const source = { droppableId: 'list1', index: 1 };  // Moving item2
const destination = { droppableId: 'list2', index: 1 };  // To position 1 in list2

const result = reorderDragable({ quoteMap, source, destination });

// output:
// {
//   quoteMap: {
//     list1: ['item1', 'item3'],
//     list2: ['item4', 'item2', 'item5'],
//   }
// }

Params

param	Description	Type	Default
quoteMap	An object where the keys represent different droppable areas (lists), and the values are arrays of items in each.	`T extends Record<string, unknown[]>`	-
source	The starting location of the dragged item. This contains the droppableId and index of the item.	`{droppableId: string; index: number;}`	-
destination	The target location where the item is being dropped, containing the droppableId and index.	`{droppableId: string; index: number;}`	-

Return

return	Description	Type	Default
quoteMap	A new object with the updated lists, reflecting the reordered items either within the same list or between different lists.	`T`	-

TABLE OF CONTENT

Example