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

# Resource Drag & Drop Reorder - Vue Timeline demo

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

- [Live demo](https://demo.mobiscroll.com/vue/timeline/resource-drag-drop-reorder)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/resource-drag-drop-reorder)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/timeline/resource-drag-drop-reorder)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/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), [React](https://demo.mobiscroll.com/react/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/vue/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 [`@resource-order-update`](https://mobiscroll.com/docs/vue/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/vue/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/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`drag-to-create`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`drag-to-move`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`drag-to-resize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`immutable-data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-immutableData) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`event-create`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreate) - event
- [`event-delete`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDelete) - event
- [`event-update`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventUpdate) - event
- [`resource-order-update`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceOrderUpdate) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const toastMessage = ref('')
const isToastOpen = ref(false)
const myEvents = ref([
  {
    id: 1,
    title: 'Event 1',
    start: '2026-11-01T00:00',
    end: '2026-11-05T00:00',
    resource: 14,
    color: 'green'
  },
  {
    id: 2,
    title: 'Event 2',
    start: '2026-11-03T00:00',
    end: '2026-11-07T00:00',
    resource: 2,
    color: 'blue'
  },
  {
    id: 3,
    title: 'Event 3',
    start: '2026-11-05T00:00',
    end: '2026-11-10T00:00',
    resource: 10,
    color: 'red'
  },
  {
    id: 4,
    title: 'Event 4',
    start: '2026-11-07T00:00',
    end: '2026-11-11T00:00',
    resource: 9,
    color: 'yellow'
  },
  {
    id: 5,
    title: 'Event 5',
    start: '2026-11-09T00:00',
    end: '2026-11-12T00:00',
    resource: 6,
    color: 'purple'
  },
])

const isReorder = ref(false)
const myResources = ref([
  { 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 tempResources = ref([...myResources.value])

const myView = ref({
  timeline: {
    type: 'month',
    resourceReorder: false
  }
})

const enableReorder = () => {
  isReorder.value = true
  myView.value = {
    timeline: {
      type: 'month',
      resourceReorder: true
    }
  }
}

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

function cancelReorder() {
  isReorder.value = false
  myResources.value = [...myResources.value]
  myView.value = {
    timeline: {
      type: 'month',
      resourceReorder: false
    }
  }
  showToast('Resource order canceled')
}

function handleResourceOrder(args) {
  tempResources.value = args.resources
}

function handleEventCreate(args) {
  myEvents.value = [...myEvents.value, args.event]
}

function handleEventDelete(args) {
  myEvents.value = myEvents.value.filter((item) => item.id !== args.event.id)
}

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

function showToast(message) {
  toastMessage.value = message
  isToastOpen.value = true
}

function handleToastClose() {
  isToastOpen.value = false
}
</script>

<template>
  <MbscEventcalendar
    :drag-to-create="true"
    :drag-to-move="true"
    :drag-to-resize="true"
    :view="myView"
    :data="myEvents"
    :immutable-data="true"
    :resources="myResources"
    @event-create="handleEventCreate"
    @event-delete="handleEventDelete"
    @event-update="handleEventUpdate"
    @resource-order-update="handleResourceOrder"
  >
    <template #header>
      <MbscCalendarNav></MbscCalendarNav>
      <div className="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">
        <MbscButton
          @click="enableReorder()"
          variant="flat"
          className="mds-reorder-switch mds-enable"
          v-if="!isReorder"
        >
          Reorder resources
        </MbscButton>
        <MbscButton @click="saveReorder()" className="mds-reorder-save mds-update" v-if="isReorder">
          Save
        </MbscButton>
        <MbscButton
          @click="cancelReorder()"
          className="mds-reorder-save mds-update"
          v-if="isReorder"
        >
          Cancel
        </MbscButton>
        <div class="mds-reorder-header-filter-separator"></div>
      </div>
      <MbscCalendarPrev />
      <MbscCalendarToday />
      <MbscCalendarNext />
    </template>
  </MbscEventcalendar>
  <MbscToast :isOpen="isToastOpen" :message="toastMessage" @close="handleToastClose" />
</template>

<style>
.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;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventCreateEvent,
  MbscEventDeleteEvent,
  MbscEventUpdateEvent,
  MbscResource,
  MbscResourceOrderEvent
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const toastMessage = ref('')
const isToastOpen = ref(false)
const myEvents = ref<MbscCalendarEvent[]>([
  {
    id: 1,
    title: 'Event 1',
    start: '2026-11-01T00:00',
    end: '2026-11-05T00:00',
    resource: 14,
    color: 'green'
  },
  {
    id: 2,
    title: 'Event 2',
    start: '2026-11-03T00:00',
    end: '2026-11-07T00:00',
    resource: 2,
    color: 'blue'
  },
  {
    id: 3,
    title: 'Event 3',
    start: '2026-11-05T00:00',
    end: '2026-11-10T00:00',
    resource: 10,
    color: 'red'
  },
  {
    id: 4,
    title: 'Event 4',
    start: '2026-11-07T00:00',
    end: '2026-11-11T00:00',
    resource: 9,
    color: 'yellow'
  },
  {
    id: 5,
    title: 'Event 5',
    start: '2026-11-09T00:00',
    end: '2026-11-12T00:00',
    resource: 6,
    color: 'purple'
  },
])
const isReorder = ref(false)
const myResources = ref<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 tempResources = ref<MbscResource[]>([...myResources.value])

const myView = ref<MbscEventcalendarView>({
  timeline: {
    type: 'month',
    resourceReorder: false
  }
})

const enableReorder = () => {
  isReorder.value = true
  myView.value = {
    timeline: {
      type: 'month',
      resourceReorder: true
    }
  }
}

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

function cancelReorder() {
  isReorder.value = false
  myResources.value = [...myResources.value]
  myView.value = {
    timeline: {
      type: 'month',
      resourceReorder: false
    }
  }
  showToast('Resource order canceled')
}

function handleResourceOrder(args: MbscResourceOrderEvent) {
  tempResources.value = args.resources
}

function handleEventCreate(args: MbscEventCreateEvent) {
  myEvents.value = [...myEvents.value, args.event]
}

function handleEventDelete(args: MbscEventDeleteEvent) {
  myEvents.value = myEvents.value.filter((item) => item.id !== args.event.id)
}

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

function showToast(message: string) {
  toastMessage.value = message
  isToastOpen.value = true
}

function handleToastClose() {
  isToastOpen.value = false
}
</script>

<template>
  <MbscEventcalendar
    :drag-to-create="true"
    :drag-to-move="true"
    :drag-to-resize="true"
    :view="myView"
    :data="myEvents"
    :immutable-data="true"
    :resources="myResources"
    @event-create="handleEventCreate"
    @event-delete="handleEventDelete"
    @event-update="handleEventUpdate"
    @resource-order-update="handleResourceOrder"
  >
    <template #header>
      <MbscCalendarNav></MbscCalendarNav>
      <div className="mds-reorder-header-filter mbsc-flex mbsc-flex-1-1">
        <MbscButton
          @click="enableReorder()"
          variant="flat"
          className="mds-reorder-switch mds-enable"
          v-if="!isReorder"
        >
          Reorder resources
        </MbscButton>
        <MbscButton @click="saveReorder()" className="mds-reorder-save mds-update" v-if="isReorder">
          Save
        </MbscButton>
        <MbscButton
          @click="cancelReorder()"
          className="mds-reorder-save mds-update"
          v-if="isReorder"
        >
          Cancel
        </MbscButton>
        <div class="mds-reorder-header-filter-separator"></div>
      </div>
      <MbscCalendarPrev />
      <MbscCalendarToday />
      <MbscCalendarNext />
    </template>
  </MbscEventcalendar>
  <MbscToast :isOpen="isToastOpen" :message="toastMessage" @close="handleToastClose" />
</template>

<style>
.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;
}
</style>
```

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

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

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

## Related demos

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