---
title: "Angular Timeline Resource Drag & Drop Reorder Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/timeline/resource-drag-drop-reorder"
---

# Resource Drag & Drop Reorder - Angular Timeline demo

Reorder resources on the Angular Timeline by drag and drop — each row shows a drag handle, and an update callback runs on drop.

- [Live demo](https://demo.mobiscroll.com/angular/timeline/resource-drag-drop-reorder)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/resource-drag-drop-reorder)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/resource-drag-drop-reorder.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/resource-drag-drop-reorder.md), [React](https://demo.mobiscroll.com/react/timeline/resource-drag-drop-reorder.md), [Vue](https://demo.mobiscroll.com/vue/timeline/resource-drag-drop-reorder.md)

## Description

Resources can be reordered directly through the UI by enabling `resourceReorder: true` under the `timeline` settings of the [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) option. When enabled, a drag handle icon will appear next to each resource, allowing users to drag and reorder resources.

When a resource is dropped into a new position, the [`onResourceOrderUpdate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceOrderUpdate) lifecycle event is triggered. To prevent the resource order from being updated, return `false` in the handler function of this event.

Use the [`immutableData`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-immutableData) option to ensure the original data remains unchanged when validating resource positions after a drop.

## What this demo shows

- A desktop timeline in month view, with days arranged horizontally and a hierarchical resource tree arranged vertically on the left.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between months, and the Today button returns to the current date.
- **Reorder action** The custom header includes a Reorder resources button before the navigation arrows. Clicking it enables resource reordering and replaces the button with Save and Cancel actions.
- **Month view** The timeline header shows the days in the selected month, with the current date highlighted.
- **Resources** The left side shows expandable and collapsible resource groups, including parent groups and fixed resources where reordering is disabled.
- **Resource hierarchy** Nested resources are grouped under parent rows, such as Group 1 and Group 2, before listing individual resources.
- **Non-reorderable resources** Resource 2 and Resource 4 remain visible in the schedule, but their drag handles are hidden and they cannot be moved.
- **Resource reordering** Reorder mode lets users move reorderable resources with drag and drop while keeping existing events assigned to their resources.
- **Grouped resources** Resources can be reordered within the existing expandable group structure.
- **Drag feedback** A drop indicator shows where the dragged resource will be placed.
- **Save and cancel flow** Save commits the pending resource order, while Cancel exits reorder mode and restores the previously committed order.
- **Cancel notification** Canceling the reorder flow shows a notification confirming that the resource order was canceled.
- **Event cards** Events are shown as colored cards with a left color stripe and the event time displayed under the title.
- **Date positioning** Events are positioned by their assigned resource and date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through dates and resources.

## Best for

- **Operational resource planning** Applications where users need to customize resource order based on priorities, preferences, or frequently accessed resources.
- **Grouped resource schedules** Timelines that organize people, rooms, equipment, or other resources under expandable parent groups.
- **Controlled manual organization** Workflows where users can review a new resource order before saving or canceling the change.
- **Mixed reorder rules** Schedules that need some resources to remain fixed while others can be manually rearranged.
- **Dense timeline views** Desktop timeline interfaces that need horizontal date navigation and vertical resource navigation in the same view.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`immutableData`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-immutableData) - option
- [`headerTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-headerTemplate) - template
- [`onResourceOrderUpdate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceOrderUpdate) - event

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, NgZone } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscResource,
  MbscResourceOrderEvent,
  Notifications,
  setOptions,
} from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(
    public notify: Notifications,
    public zone: NgZone,
  ) {}
  isReorder = false;
  myResources: MbscResource[] = [
    { id: 1, name: 'Resource 1' },
    { id: 2, name: 'Resource 2 (Reorder disabled)', reorder: false },
    { id: 3, name: 'Resource 3' },
    { id: 4, name: 'Resource 4 (Reorder disabled)', reorder: false },
    {
      id: 5,
      name: 'Group 1',
      children: [
        { id: 6, name: 'Resource 5' },
        { id: 7, name: 'Resource 6' },
        { id: 8, name: 'Resource 7' },
      ],
    },
    { id: 9, name: 'Resource 8' },
    { id: 10, name: 'Resource 9' },
    {
      id: 11,
      name: 'Group 2',
      children: [
        { id: 12, name: 'Resource 10' },
        { id: 13, name: 'Resource 11' },
        { id: 14, name: 'Resource 12' },
      ],
    },
    { id: 15, name: 'Resource 13' },
    { id: 16, name: 'Resource 14' },
    {
      id: 17,
      name: 'Group 3',
      children: [
        { id: 18, name: 'Resource 15' },
        { id: 19, name: 'Resource 16' },
        { id: 20, name: 'Resource 17' },
      ],
    },
    { id: 21, name: 'Resource 18' },
    {
      id: 22,
      name: 'Group 4',
      children: [
        { id: 23, name: 'Resource 19' },
        { id: 24, name: 'Resource 20' },
        { id: 25, name: 'Resource 21' },
      ],
    },
    { id: 26, name: 'Resource 22' },
  ];
  tempResources: MbscResource[] = [...this.myResources];
  myEvents: MbscCalendarEvent[] = [
    {
      id: 1,
      title: 'Event 1',
      start: '2026-10-01T00:00',
      end: '2026-10-05T00:00',
      resource: 14,
      color: 'green',
    },
    {
      id: 2,
      title: 'Event 2',
      start: '2026-10-03T00:00',
      end: '2026-10-07T00:00',
      resource: 2,
      color: 'blue',
    },
    {
      id: 3,
      title: 'Event 3',
      start: '2026-10-05T00:00',
      end: '2026-10-10T00:00',
      resource: 10,
      color: 'red',
    },
    {
      id: 4,
      title: 'Event 4',
      start: '2026-10-07T00:00',
      end: '2026-10-11T00:00',
      resource: 9,
      color: 'yellow',
    },
    {
      id: 5,
      title: 'Event 5',
      start: '2026-10-09T00:00',
      end: '2026-10-12T00:00',
      resource: 6,
      color: 'purple',
    },
  ];

  myView: MbscEventcalendarView = {
    timeline: {
      type: 'month',
      resourceReorder: false,
    },
  };

  enableReorder() {
    this.isReorder = true;
    this.myView = {
      timeline: {
        type: 'month',
        resourceReorder: true,
      },
    };
  }

  saveReorder() {
    this.isReorder = false;
    this.myView = {
      timeline: {
        type: 'month',
        resourceReorder: false,
      },
    };
    this.myResources = this.tempResources;
  }

  cancelReorder() {
    this.isReorder = false;
    this.myResources = [...this.myResources];

    this.myView = {
      timeline: {
        type: 'month',
        resourceReorder: false,
      },
    };
    this.showToast('Resource order canceled');
  }

  handleResourceOrder(args: MbscResourceOrderEvent): void {
    this.tempResources = args.resources;
  }
  showToast(message: string): void {
    this.notify.toast({
      message: message,
    });
  }
}
```

### Template

```html
<mbsc-eventcalendar
  [view]="myView"
  [data]="myEvents"
  [resources]="myResources"
  [immutableData]="true"
  [headerTemplate]="header"
  (onResourceOrderUpdate)="handleResourceOrder($event)"
>
  <ng-template #header>
    <mbsc-calendar-nav></mbsc-calendar-nav>
    <div class="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">
      <mbsc-button (click)="enableReorder()" variant="flat" class="mds-reorder-switch mds-enable" *ngIf="!isReorder">
        Reorder resources
      </mbsc-button>
      <mbsc-button (click)="saveReorder()" class="mds-reorder-save mds-update" *ngIf="isReorder">Save</mbsc-button>
      <mbsc-button (click)="cancelReorder()" class="mds-reorder-save mds-update" *ngIf="isReorder">Cancel</mbsc-button>
      <div class="mds-reorder-header-filter-separator"></div>
    </div>
    <mbsc-calendar-prev></mbsc-calendar-prev>
    <mbsc-calendar-today></mbsc-calendar-today>
    <mbsc-calendar-next></mbsc-calendar-next>
  </ng-template>
</mbsc-eventcalendar>
```

### CSS

```css
.mds-resource-drag-drop-reorder .mbsc-timeline-resource-col {
  width: 240px;
}

.mds-reorder-header-filter {
  justify-content: end;
  align-items: center;
}

.mds-reorder-header-filter-separator {
  height: 25px;
  margin: 0 8px 0 12px;
  border: 1px solid var(--mbsc-eventcalendar-border-color);
}

.mbsc-material .mds-reorder-switch {
  margin-right: 10px;
}

.mds-reorder-cancel.mbsc-button {
  margin-right: 12px;
}
```

## Implementation notes

- Use `timeline: { type: 'month', resourceReorder: false }` as the default view. `resourceReorder` is toggled dynamically - `false` in normal mode, `true` in reorder mode.
- Set `immutableData: true` on the calendar. This ensures the original resource order is not mutated in place when `onResourceOrderUpdate` fires, which is required if you need to validate or cancel the reorder before committing it.
- Define ~22 leaf resources and 4 groups (each with 3 children). Two individual resources have `reorder: false` set on the resource object (Resource 2 and Resource 4) - their drag handles are hidden and they cannot be moved by the user. Groups and children without this property are all reorderable.
- Add 43 events with `dyndatetime` offsets across the current month, each with a `color` property, assigned to various resources.
- **Reorder mode state machine**: Maintain a boolean flag (`isReorder`) that controls which buttons appear in the custom header, and what `resourceReorder` value is passed to the view. Also maintain `tempResources` - a pending copy of the resource order that accumulates changes during a reorder session before they are committed or discarded.
  - **Enable reorder**: set `isReorder = true`, set `resourceReorder: true` in the view. The calendar renders drag handles next to each reorderable resource row.
  - **Save**: set `isReorder = false`, set `resourceReorder: false`, commit `tempResources` as the new canonical resource order.
  - **Cancel**: set `isReorder = false`, set `resourceReorder: false`, restore the previous committed resource order, show a `Toast` ("Resource order canceled").
- **`onResourceOrderUpdate`**: fires each time the user drops a resource into a new position. `args.resources` contains the full reordered resource array. Store it in `tempResources` (not committed yet). Return `false` from the handler to reject a specific drop.
- **Custom header** (`renderHeader` / `headerTemplate` / `header` slot): renders `CalendarNav` on the left, then conditionally:
  - When NOT in reorder mode: a flat "Reorder resources" button.
  - When IN reorder mode: "Save" and "Cancel" buttons side by side.
  - `CalendarPrev`, `CalendarToday`, `CalendarNext` on the right.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Resource Group Aggregate Summaries](https://demo.mobiscroll.com/angular/timeline/show-summaries-aggregates-for-resource-groups.md) - Show aggregate totals in parent resource rows on a Angular Timeline — summary values recalculate as bookings are added, changed, or removed.
- Next: [Dynamic Resource Sort](https://demo.mobiscroll.com/angular/timeline/dynamic-calculation-resource-sort.md) - Sort Angular Timeline resources by metrics — a header popup ranks trucks by standby, payload, or deadhead time, reordering on event changes.