---
title: "Javascript Timeline Resource Drag-and-Drop Reorder Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/resource-drag-drop-reorder"
---

# Resource Drag-and-Drop Reorder - JavaScript Timeline demo

Reorder resources on a Javascript Timeline by drag and drop — each row shows a drag handle, and an update callback runs on drop. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/resource-drag-drop-reorder)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/resource-drag-drop-reorder)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/resource-drag-drop-reorder.md), [Angular](https://demo.mobiscroll.com/angular/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/javascript/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/javascript/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/javascript/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/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`cssClass`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-cssClass) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`immutableData`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-immutableData) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`onEventCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreate) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method
- [`onEventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDelete) - event
- [`onEventUpdate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventUpdate) - event
- [`onResourceOrderUpdate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onResourceOrderUpdate) - event
- [`renderHeader`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderHeader) - renderer
- [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var resources = [
  { 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' },
];
var events = [
  { 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' },
];
var tempResources = [];
var calInst = mobiscroll.eventcalendar('#demo-resource-drag-drop-reorder', {
  cssClass: 'mds-resource-drag-drop-reorder',
  view: {
    timeline: {
      type: 'month',
      resolutionHorizontal: 'day',
      resourceReorder: false,
    },
  },
  immutableData: true,
  data: events,
  resources: resources,
  onEventCreate: function (args, inst) {
    events.push(args.event);
    inst.setEvents(events.slice());
  },
  onEventDelete: function (args, inst) {
    events = events.filter(function (item) {
      return item.id !== args.event.id;
    });
    inst.setEvents(events);
  },
  onEventUpdate: function (args, inst) {
    var newEvent = args.event;
    var eventIndex = events.findIndex(function (e) {
      return e.id === newEvent.id;
    });
    var newEventList = events.slice();
    newEventList.splice(eventIndex, 1, newEvent);
    events = newEventList.slice();
    inst.setEvents(newEventList);
  },
  onResourceOrderUpdate: function (args) {
    tempResources = args.resources;
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav></div>' +
      '<div class="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">' +
      '<button mbsc-button data-variant="flat" class="mds-reorder-switch mds-enable">Reorder resources</button>' +
      '<button mbsc-button class="mds-reorder-save mds-update">Save</button>' +
      '<button mbsc-button class="mds-reorder-cancel mds-update">Cancel</button>' +
      '<div class="mds-reorder-header-filter-separator"></div>' +
      '<button mbsc-calendar-prev class="mds-header-filter-prev"></button>' +
      '<button mbsc-calendar-today class="mds-header-filter-today"></button>' +
      '<button mbsc-calendar-next class="mds-header-filter-next"></button>'
    );
  },
});

function updateHeaderBtns(enableOrder) {
  var enableElm = document.querySelector('.mds-enable');
  var updateElm = document.querySelectorAll('.mds-update');
  if (enableOrder) {
    enableElm.style.display = 'none';
    updateElm.forEach(function (el) {
      el.style.display = '';
    });
  } else {
    enableElm.style.display = '';
    updateElm.forEach(function (el) {
      el.style.display = 'none';
    });
  }
}

document.querySelector('.mds-reorder-switch').addEventListener(
  'click',
  function () {
    updateHeaderBtns(true);
    calInst.setOptions({
      view: {
        timeline: {
          type: 'month',
          resourceReorder: true,
        },
      },
    });
  },
  true,
);

document.querySelector('.mds-reorder-cancel').addEventListener(
  'click',
  function () {
    updateHeaderBtns(false);
    calInst.setOptions({
      resources: resources.slice(),
      view: {
        timeline: {
          type: 'month',
          resourceReorder: false,
        },
      },
    });

    mobiscroll.toast({
      message: 'Resource order canceled',
    });
  },
  true,
);

document.querySelector('.mds-reorder-save').addEventListener('click', function () {
  if (tempResources.length) {
    resources = tempResources;
  }
  updateHeaderBtns(false);
  calInst.setOptions({
    resources: resources.slice(),
    view: {
      timeline: {
        type: 'month',
        resourceReorder: false,
      },
    },
  });

  mobiscroll.toast({
    message: 'Resource order saved',
  });
});

updateHeaderBtns(false);
```

### HTML

```html
<div id="demo-resource-drag-drop-reorder"></div>
```

### 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-javascript.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 javascript
   ```

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

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

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

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

## Related demos

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