Mastering Angular CDK Drag & Drop Utilities

If you’ve ever implemented drag-and-drop in Angular, you’ve probably leaned on the powerful @angular/cdk/drag-drop module. And while the UI interaction often steals the spotlight, it’s the data layer that truly keeps things running smoothly.

Behind every draggable item is some well-orchestrated array manipulation — and that’s where Angular CDK’s built-in utility functions become essential.

Let’s break down the three must-know array utilities for any drag-and-drop experience in Angular apps 👇

---

🔧 Utility #1: moveItemInArray()

📝 Use when: Reordering items within the same list

📌 Common scenario: A user reorders items inside a single column (e.g., reordering “To Do” tasks)

import { moveItemInArray } from '@angular/cdk/drag-drop';

const myArray = ['a', 'b', 'c', 'd'];
moveItemInArray(myArray, 0, 2);
console.log(myArray); 
// ['b', 'c', 'a', 'd']

🧠 How it works:

• myArray: the list to modify
• 0: original index of the item
• 2: new index where the item should land

✅ Super clean, super efficient — no manual splicing needed.

---

🔧 Utility #2: transferArrayItem()

📝 Use when: Moving an item from one list to another

📌 Common scenario: Task moved from “Backlog” to “In Progress”

import { transferArrayItem } from '@angular/cdk/drag-drop';

const backlog = ['task1', 'task2', 'task3'];
const inProgress = ['taskA'];
transferArrayItem(backlog, inProgress, 1, 1);

console.log(backlog);     // ['task1', 'task3']
console.log(inProgress);  // ['taskA', 'task2']

🔍 Parameters:

• source: origin array
• target: destination array
• currentIndex: position of the item in source
• targetIndex: position to insert it in target

🎯 It moves the item — not copies.

---

🔧 Utility #3: copyArrayItem()

📝 Use when: Copying an item to another list without removing it from the source

📌 Common scenario: Duplicating a template block into a new section

import { copyArrayItem } from '@angular/cdk/drag-drop';

const templates = ['block1', 'block2'];
const canvas = ['sectionA'];
copyArrayItem(templates, canvas, 1, 1);

console.log(templates); // ['block1', 'block2']
console.log(canvas);    // ['sectionA', 'block2']

🧠 Identical to transferArrayItem, except the source remains unchanged.

---

💡 Which One Should You Use?

🧩 Use Case	✅ Function
Reorder within same list	moveItemInArray()
Move between different lists	transferArrayItem()
Duplicate to another list	copyArrayItem()

---

🔄 Integrating with drop() in Your Component

These utilities shine when used inside your drag event handler:

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

👉 Want to support copying instead? Just switch transferArrayItem with copyArrayItem.

---

🚀 Final Thoughts

These utility functions may look small, but they’re absolutely crucial when building seamless drag-and-drop interfaces in Angular.

✅ Clean array manipulation
✅ Consistent behavior
✅ Saves you from reinventing the wheel

Whether you’re creating a Kanban board, media manager, or even a dashboard builder — having moveItemInArray, transferArrayItem, and copyArrayItem in your toolbox will save time and headaches