---
title: "Vue Scheduler Drag, Resize & Move Restrictions Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource"
---

# Drag, Resize & Move Restrictions - Vue Scheduler demo

Restrict drag, resize, and moves per event, per resource, or globally in the Vue Scheduler — fix length, lock time, or block cross-resource moves. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/scheduler/conditional-move-resize)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/scheduler/conditional-move-resize)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [React](https://demo.mobiscroll.com/react/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md)

## Description

The drag & drop interactions can be fine-tuned depending on the requirements and situations. Maybe controlled by roles, event types, resources the move and resize can be turned on/off on an event basis, per resource or globally on the instance.

- **Events can be fixed in length (cannot be resized)** - by setting [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) option to `false` the events cannot be resized.
- **Events can be fixed in time (cannot be moved)** - by setting [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) option to `false` the events cannot be moved in time. Take in consideration that [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) must be set to `true`
- **Events can be fixed to resource (cannot be moved to another resource)** - by setting [`dragBetweenResources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragBetweenResources) option to `false` the events cannot be moved between resources. Take in consideration that [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) must be set to `true`

To control this on a [resource](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) an event basis, use [the appropriate properties](https://demo.mobiscroll.com/vue/scheduler/event-data-structure) which have precedence over global calendar options.

## What this demo shows

- A desktop day scheduler with date navigation, multiple resources, and a vertically scrollable time grid for the selected day.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between days and jump back to the current day.
- **Day header** The short weekday name and the selected date are shown below the main navigation.
- **Resource strip** Six resources are displayed across the scheduler: Resource A, Resource B, Resource C, Resource D, Resource E, and Resource F.
- **Event-level restrictions** Resource A, Resource B, and Resource C have no resource-level restrictions, but their events use per-event interaction rules.
- **Resource A event** Event 1 is shown on Resource A and cannot be resized.
- **Resource B event** Event 3 is shown on Resource B and cannot be moved between resources.
- **Resource C event** Event 5 is shown on Resource C and cannot be moved in time.
- **Resource-level restrictions** Resource D, Resource E, and Resource F apply interaction rules to events placed on those resources.
- **Resource D** Events on Resource D cannot be moved in time.
- **Resource E** Events on Resource E cannot be moved between resources.
- **Resource F** Events on Resource F cannot be resized.
- **Global interaction controls** A control panel next to the scheduler is titled `Control the interaction globally (all events/resources)`.
- **Global resize control** The `Events cannot be resized dragToResize=false` switch disables resizing for all events while still allowing events to be moved in time.
- **Global time-move control** The `Events cannot be moved in time dragInTime=false` switch disables moving events in time while still allowing resizing.
- **Global resource-move control** The `Events cannot be moved between resources dragBetweenResources=false` switch disables moving events between resources.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected day.
- **Current time** A horizontal blue line marks the current time across the scheduler.
- **Hover feedback** Hovering over the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Timed events** Events are displayed as colored cards with a colored left stripe, the event title, and the exact start and end time.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles when the event allows those interactions.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Mixed editing rules** Schedulers where some events can be moved, some can be resized, and others need to stay fixed in time, length, or resource.
- **Event-type restrictions** Scheduling setups where different event categories need different drag, drop, and resize behavior.
- **Resource-based rules** Resource schedules where interaction rules depend on the assigned resource.
- **Role- or policy-driven control** Use cases where editing behavior depends on business rules, permissions, or approval requirements.
- **Global interaction modes** Interfaces that need to turn drag and resize capabilities on or off across the whole scheduler.

## Tutorial

### Control the interaction globally (all events/resources)

- [ ] Events cannot be resized `dragToResize=false`
- [ ] Events cannot be moved in time `dragInTime=false`
- [ ] Events cannot be moved between resources `dragBetweenResources=false`

```vue
<script setup>
    // relevant events
    const myData = ref([{
        color: 'cyan',
        end: '2026-10-22T14:00',
        resize: false,
        resource: 1,
        start: '2026-10-22T09:00',
        title: 'Event 1 (cannot be resized)'
    }, {
        color: 'green',
        dragBetweenResources: false,
        end: '2026-10-22T16:00',
        resource: 2,
        start: '2026-10-22T10:00',
        title: 'Event 3 (cannot be moved between resources)'
    }, {
        color: 'blue',
        dragInTime: false,
        end: '2026-10-22T15:00',
        resource: 3,
        start: '2026-10-22T11:00',
        title: 'Event 5 (cannot be moved in time)'
    }]);
    // relevant resources
    const myResources = ref([{
        id: 4,
        name: 'Resource D (Events cannot be moved in time)',
        eventDragInTime: false
    }, {
        id: 5,
        name: 'Resource E (Events cannot be moved between resources)',
        eventDragBetweenResources: false
    }, {
        id: 6,
        name: 'Resource F (Events cannot be resized)',
        eventResize: false
    }]);
</script>
<template>
<MbscEventcalendar
    :view="{scheduler: {type: 'day'}}"
    :data="myData"
    :resources:"myResources"
    :dragToMove="true"
    :dragToResize="true"
    :dragInTime="true"
    :dragBetweenResources="true"
/>
</template>
```

## 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
- [`dragBetweenResources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragBetweenResources) - option
- [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myView = {
  scheduler: { type: 'week' }
}

const myEvents = ref([
  {
    color: 'cyan',
    end: '2026-10-22T14:00',
    resize: false,
    resource: 1,
    start: '2026-10-22T09:00',
    title: 'Event 1 (cannot be resized)'
  },
  {
    color: 'green',
    dragBetweenResources: false,
    end: '2026-10-22T16:00',
    resource: 2,
    start: '2026-10-22T10:00',
    title: 'Event 3 (cannot be moved between resources)'
  },
  {
    color: 'blue',
    dragInTime: false,
    end: '2026-10-22T15:00',
    resource: 3,
    start: '2026-10-22T11:00',
    title: 'Event 5 (cannot be moved in time)'
  },
  {
    color: 'pink',
    resource: 1,
    end: '2026-10-22T19:00',
    start: '2026-10-22T16:00',
    title: 'Event 2'
  },
  {
    color: 'yellow',
    end: '2026-10-22T20:00',
    resource: 2,
    start: '2026-10-22T17:00',
    title: 'Event 4'
  },
  {
    color: 'gray',
    end: '2026-10-22T18:00',
    resource: 3,
    start: '2026-10-22T16:00',
    title: 'Event 6'
  },
  {
    color: 'red',
    resource: 4,
    end: '2026-10-22T13:00',
    start: '2026-10-22T09:00',
    title: 'Event 7'
  },
  {
    color: 'brown',
    end: '2026-10-22T15:00',
    resource: 5,
    start: '2026-10-22T11:00',
    title: 'Event 8'
  },
  {
    color: 'teal',
    end: '2026-10-22T18:00',
    resource: 6,
    start: '2026-10-22T13:00',
    title: 'Event 9'
  }
])

const myResources = ref([
  {
    id: 1,
    name: 'Resource A'
  },
  {
    id: 2,
    name: 'Resource B'
  },
  {
    id: 3,
    name: 'Resource C'
  },
  {
    id: 4,
    name: 'Resource D (Events cannot be moved in time)',
    eventDragInTime: false
  },
  {
    id: 5,
    name: 'Resource E (Events cannot be moved between resources)',
    eventDragBetweenResources: false
  },
  {
    id: 6,
    name: 'Resource F (Events cannot be resized)',
    eventResize: false
  }
])
</script>

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :dragToMove="true" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myView: MbscEventcalendarView = {
  scheduler: { type: 'week' }
}

const myEvents = ref<MbscCalendarEvent[]>([
  {
    color: 'cyan',
    end: '2026-10-22T14:00',
    resize: false,
    resource: 1,
    start: '2026-10-22T09:00',
    title: 'Event 1 (cannot be resized)'
  },
  {
    color: 'green',
    dragBetweenResources: false,
    end: '2026-10-22T16:00',
    resource: 2,
    start: '2026-10-22T10:00',
    title: 'Event 3 (cannot be moved between resources)'
  },
  {
    color: 'blue',
    dragInTime: false,
    end: '2026-10-22T15:00',
    resource: 3,
    start: '2026-10-22T11:00',
    title: 'Event 5 (cannot be moved in time)'
  },
  {
    color: 'pink',
    resource: 1,
    end: '2026-10-22T19:00',
    start: '2026-10-22T16:00',
    title: 'Event 2'
  },
  {
    color: 'yellow',
    end: '2026-10-22T20:00',
    resource: 2,
    start: '2026-10-22T17:00',
    title: 'Event 4'
  },
  {
    color: 'gray',
    end: '2026-10-22T18:00',
    resource: 3,
    start: '2026-10-22T16:00',
    title: 'Event 6'
  },
  {
    color: 'red',
    resource: 4,
    end: '2026-10-22T13:00',
    start: '2026-10-22T09:00',
    title: 'Event 7'
  },
  {
    color: 'brown',
    end: '2026-10-22T15:00',
    resource: 5,
    start: '2026-10-22T11:00',
    title: 'Event 8'
  },
  {
    color: 'teal',
    end: '2026-10-22T18:00',
    resource: 6,
    start: '2026-10-22T13:00',
    title: 'Event 9'
  }
])

const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Resource A'
  },
  {
    id: 2,
    name: 'Resource B'
  },
  {
    id: 3,
    name: 'Resource C'
  },
  {
    id: 4,
    name: 'Resource D (Events cannot be moved in time)',
    eventDragInTime: false
  },
  {
    id: 5,
    name: 'Resource E (Events cannot be moved between resources)',
    eventDragBetweenResources: false
  },
  {
    id: 6,
    name: 'Resource F (Events cannot be resized)',
    eventResize: false
  }
])
</script>

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :dragToMove="true" />
</template>
```

## Implementation notes

- Use `view: { scheduler: { type: 'day' } }`. Enable globally: `dragToMove: true`, `dragToResize: true`.
- Define 6 resources (A-F). Resources A-C are unrestricted. Resources D-F carry resource-level drag restrictions:
  - Resource D: `eventDragInTime: false` - events on this resource cannot be moved along the time axis
  - Resource E: `eventDragBetweenResources: false` - events on this resource cannot be moved to another resource row
  - Resource F: `eventResize: false` - events on this resource cannot be resized
- Add events with `dyndatetime` offsets, all on today. Events on resources A-C carry per-event overrides:
  - On Resource A: `resize: false` - locked length
  - On Resource B: `dragBetweenResources: false` - locked to its row
  - On Resource C: `dragInTime: false` - can only be moved between resources, not along time
- **Precedence**: per-event properties (`resize`, `dragBetweenResources`, `dragInTime`) and per-resource properties (`eventResize`, `eventDragBetweenResources`, `eventDragInTime`) both override the global calendar options. Event-level properties override resource-level when both are set.

## 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: [Drag, Resize and Create Events](https://demo.mobiscroll.com/vue/scheduler/move-resize-drag-drop-to-create-events.md) - Enable or disable drag-to-create, move, resize, and delete in a Vue Scheduler — configure snap interval and lock individual events as read-only.
- Next: [Instance Event Transfer](https://demo.mobiscroll.com/vue/scheduler/drag-drop-between-calendar-instances.md) - Move events between two Vue Scheduler instances with drop — reassign appointments, tasks, or shifts across separate weekly scheduling views.