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

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

Reorder resources on a React Timeline by drag and drop — each row shows a drag handle, and an update callback runs on drop. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/timeline/resource-drag-drop-reorder)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/timeline/resource-drag-drop-reorder)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/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), [Angular](https://demo.mobiscroll.com/angular/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/react/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/react/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/react/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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`immutableData`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-immutableData) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`renderHeader`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderHeader) - renderer
- [`onResourceOrderUpdate`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onResourceOrderUpdate) - event
- [`onEventCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventCreate) - event
- [`onEventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventDelete) - event
- [`onEventUpdate`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventUpdate) - event
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event

## Code

### JSX

```jsx
import {
  Button,
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { useCallback, useState } from 'react';

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

const 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' },
];

const 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' },
];

const defaultView = {
  timeline: {
    type: 'month',
    resourceReorder: false,
  },
};

function App() {
  const [isReorder, setReorder] = useState(false);
  const [isToastOpen, setToastOpen] = useState(false);
  const [myEvents, setEvents] = useState(events);
  const [myResources, setResources] = useState(resources);
  const [tempResources, setTempResources] = useState([...resources]);
  const [message, setMessage] = useState('');
  const [myView, setMyView] = useState(defaultView);

  const enableReorder = useCallback(() => {
    setReorder(true);
    setMyView({ timeline: { type: 'month', resourceReorder: true } });
  }, []);

  const onToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const saveReorder = useCallback(() => {
    setReorder(false);
    setMyView({ timeline: { type: 'month', resourceReorder: false } });
    setResources([...tempResources]);
  }, [tempResources]);

  const cancelReorder = useCallback(() => {
    setReorder(false);
    setResources([...myResources]);
    setMyView({ timeline: { type: 'month', resourceReorder: false } });
    setMessage('Resource order canceled');
    setToastOpen(true);
  }, [myResources]);

  const handleResourceOrder = useCallback((args) => {
    setTempResources(args.resources);
  }, []);

  const handleEventUpdate = useCallback(
    (args) => {
      const newEvent = args.event;
      const eventIndex = myEvents.findIndex((e) => e.id === newEvent.id);
      const newEventList = [...myEvents];
      newEventList.splice(eventIndex, 1, newEvent);
      setEvents(newEventList);
    },
    [myEvents],
  );

  const handleEventCreate = useCallback(
    (args) => {
      setEvents([...myEvents, args.event]);
    },
    [myEvents],
  );

  const handleEventDelete = useCallback(
    (args) => {
      setEvents(myEvents.filter((item) => item.id !== args.event.id));
    },
    [myEvents],
  );

  const customHeader = useCallback(
    () => (
      <>
        <CalendarNav />
        <div className="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">
          {!isReorder && (
            <Button className="mds-reorder-switch mds-enable" variant="flat" onClick={enableReorder}>
              Reorder resources
            </Button>
          )}
          {isReorder && (
            <>
              <Button className="mds-reorder-save mds-update" onClick={saveReorder}>
                Save
              </Button>
              <Button className="mds-reorder-cancel mds-update " onClick={cancelReorder}>
                Cancel
              </Button>
            </>
          )}
          <div className="mds-reorder-header-filter-separator" />
        </div>
        <CalendarPrev />
        <CalendarToday />
        <CalendarNext />
      </>
    ),
    [enableReorder, isReorder, cancelReorder, saveReorder],
  );

  return (
    <>
      <Eventcalendar
        resources={myResources}
        immutableData={true}
        view={myView}
        data={myEvents}
        renderHeader={customHeader}
        onResourceOrderUpdate={handleResourceOrder}
        onEventCreate={handleEventCreate}
        onEventDelete={handleEventDelete}
        onEventUpdate={handleEventUpdate}
      />
      <Toast isOpen={isToastOpen} message={message} onClose={onToastClose} />
    </>
  );
}

export default App;
```

### TSX

```tsx
import {
  Button,
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreateEvent,
  MbscEventDeleteEvent,
  MbscEventUpdateEvent,
  MbscResource,
  MbscResourceOrderEvent,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { FC, Fragment, useCallback, useState } from 'react';

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

const resources: 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' },
];

const 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' },
];

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

const App: FC = () => {
  const [myResources, setResources] = useState<MbscResource[]>(resources);
  const [tempResources, setTempResources] = useState<MbscResource[]>([...resources]);
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>(events);
  const [myView, setMyView] = useState<MbscEventcalendarView>(defaultView);
  const [isReorder, setReorder] = useState(false);
  const [isToastOpen, setToastOpen] = useState(false);
  const [message, setMessage] = useState('');

  const enableReorder = useCallback(() => {
    setReorder(true);
    setMyView({ timeline: { type: 'month', resourceReorder: true } });
  }, []);

  const onToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const saveReorder = useCallback(() => {
    setReorder(false);
    setMyView({ timeline: { type: 'month', resourceReorder: false } });
    setResources([...tempResources]);
  }, [tempResources]);

  const cancelReorder = useCallback(() => {
    setReorder(false);
    setResources([...myResources]);
    setMyView({ timeline: { type: 'month', resourceReorder: false } });
    setMessage('Resource order canceled');
    setToastOpen(true);
  }, [myResources]);

  const handleResourceOrder = useCallback((args: MbscResourceOrderEvent) => {
    setTempResources(args.resources);
  }, []);

  const handleEventUpdate = useCallback(
    (args: MbscEventUpdateEvent) => {
      const newEvent = args.event;
      const eventIndex = myEvents.findIndex((e) => e.id === newEvent.id);
      const newEventList = [...myEvents];
      newEventList.splice(eventIndex, 1, newEvent);
      setEvents(newEventList);
    },
    [myEvents],
  );

  const handleEventCreate = useCallback(
    (args: MbscEventCreateEvent) => {
      setEvents([...myEvents, args.event]);
    },
    [myEvents],
  );

  const handleEventDelete = useCallback(
    (args: MbscEventDeleteEvent) => {
      setEvents(myEvents.filter((item: MbscCalendarEvent) => item.id !== args.event.id));
    },
    [myEvents],
  );

  const customHeader = useCallback(
    () => (
      <Fragment>
        <CalendarNav />
        <div className="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">
          {!isReorder && (
            <Button className="mds-reorder-switch mds-enable" variant="flat" onClick={enableReorder}>
              Reorder resources
            </Button>
          )}
          {isReorder && (
            <>
              <Button className="mds-reorder-save mds-update" onClick={saveReorder}>
                Save
              </Button>
              <Button className="mds-reorder-cancel mds-update " onClick={cancelReorder}>
                Cancel
              </Button>
            </>
          )}
          <div className="mds-reorder-header-filter-separator" />
        </div>
        <CalendarPrev />
        <CalendarToday />
        <CalendarNext />
      </Fragment>
    ),
    [enableReorder, isReorder, cancelReorder, saveReorder],
  );

  return (
    <>
      <Eventcalendar
        resources={myResources}
        immutableData={true}
        view={myView}
        data={myEvents}
        renderHeader={customHeader}
        onResourceOrderUpdate={handleResourceOrder}
        onEventCreate={handleEventCreate}
        onEventDelete={handleEventDelete}
        onEventUpdate={handleEventUpdate}
      />
      <Toast isOpen={isToastOpen} message={message} onClose={onToastClose} />
    </>
  );
};
export default App;
```

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

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 react --trial`.

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

## Related demos

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