---
title: "Javascript Timeline Drag & Drop Restrictions per Event & Resource Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource"
---

# Drag & Drop Restrictions per Event & Resource - JavaScript Timeline demo

Restrict drag, move, and resize on a Javascript Timeline per event, resource, or globally — lock events in time, fix length, or prevent resource switches. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/conditional-move-resize)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [Angular](https://demo.mobiscroll.com/angular/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [React](https://demo.mobiscroll.com/react/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md), [Vue](https://demo.mobiscroll.com/vue/timeline/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/javascript/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/javascript/eventcalendar/api#opt-dragInTime) option to `false` the events cannot be moved in time. Take in consideration that [`dragToMove`](https://mobiscroll.com/docs/javascript/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/javascript/eventcalendar/api#opt-dragBetweenResources) option to `false` the events cannot be moved between resources. Take in consideration that [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) must be set to `true`

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

## What this demo shows

- A desktop daily timeline where hours are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected day, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.

- **Resources** Six resources are displayed: 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 timeline 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.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, and the start and end time of the event.
- **Date positioning** Events are positioned by their assigned resource and exact 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 time and resources.

## Best for

- **Mixed editing rules** Timelines where some events can be moved, some can be resized, and others need to stay fixed in time, length, or resource.
- **Event-type restrictions** Timeline 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 timelines.

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

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        timeline: { type: 'day' }
    },
    // relevant events
    data: [{
        color: 'cyan',
        end: '2026-10-21T14:00',
        resize: false,
        resource: 1,
        start: '2026-10-21T09:00',
        title: 'Event 1 (cannot be resized)'
    }, {
        color: 'green',
        dragBetweenResources: false,
        end: '2026-10-21T16:00',
        resource: 2,
        start: '2026-10-21T10:00',
        title: 'Event 3 (cannot be moved between resources)'
    }, {
        color: 'blue',
        dragInTime: false,
        end: '2026-10-21T15:00',
        resource: 3,
        start: '2026-10-21T11:00',
        title: 'Event 5 (cannot be moved in time)'
    }],
    // relevant resources
    resources:[{
        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
    }],
    dragToMove: true,
    dragToResize: true,
    dragInTime: true
    dragBetweenResources: true
});
```

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

## Code

### JS

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

mobiscroll.eventcalendar('#demo-conditional-drag-drop-timeline', {
  view: {
    timeline: { type: 'day' },
  },
  dragToMove: true,
  dragToResize: true,
  data: [
    {
      color: 'cyan',
      end: '2026-10-21T14:00',
      resize: false,
      resource: 1,
      start: '2026-10-21T09:00',
      title: 'Event 1 (cannot be resized)',
    },
    {
      color: 'green',
      dragBetweenResources: false,
      end: '2026-10-21T16:00',
      resource: 2,
      start: '2026-10-21T10:00',
      title: 'Event 3 (cannot be moved between resources)',
    },
    {
      color: 'blue',
      dragInTime: false,
      end: '2026-10-21T15:00',
      resource: 3,
      start: '2026-10-21T11:00',
      title: 'Event 5 (cannot be moved in time)',
    },
    {
      color: 'pink',
      resource: 1,
      end: '2026-10-21T19:00',
      start: '2026-10-21T16:00',
      title: 'Event 2',
    },
    {
      color: 'yellow',
      end: '2026-10-21T20:00',
      resource: 2,
      start: '2026-10-21T17:00',
      title: 'Event 4',
    },
    {
      color: 'gray',
      end: '2026-10-21T18:00',
      resource: 3,
      start: '2026-10-21T16:00',
      title: 'Event 6',
    },
    {
      color: 'red',
      resource: 4,
      end: '2026-10-21T13:00',
      start: '2026-10-21T09:00',
      title: 'Event 7',
    },
    {
      color: 'brown',
      end: '2026-10-21T15:00',
      resource: 5,
      start: '2026-10-21T11:00',
      title: 'Event 8',
    },
    {
      color: 'teal',
      end: '2026-10-21T18:00',
      resource: 6,
      start: '2026-10-21T13:00',
      title: 'Event 9',
    },
  ],
  resources: [
    {
      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,
    },
  ],
});
```

### HTML

```html
<div id="demo-conditional-drag-drop-timeline"></div>
```

## Implementation notes

- Use `timeline: { type: 'day' }` - a single-day view with each resource as a row.
- Enable globally: `dragToMove: true`, `dragToResize: true`. These are the baseline; per-event and per-resource properties selectively override them.
- 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 9 events with `dyndatetime` offsets, all on today. Events 1, 3, and 5 carry per-event drag overrides on resources A-C; events 7-9 sit on resources D-F and inherit their resource-level restrictions:
  - Event 1 (cyan, resource A): `resize: false` - locked length regardless of global `dragToResize`
  - Event 3 (green, resource B): `dragBetweenResources: false` - locked to its resource row
  - Event 5 (blue, resource C): `dragInTime: false` - can only be moved between resources, not along time
- **Per-event properties** (`resize`, `dragBetweenResources`, `dragInTime`) and **per-resource properties** (`eventResize`, `eventDragBetweenResources`, `eventDragInTime`) both take precedence over the global calendar options. Event-level properties override resource-level properties 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-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: [Drag, Move & Resize Events](https://demo.mobiscroll.com/javascript/timeline/move-resize-drag-drop-to-create-events.md) - Drag to create, move, resize, and delete events on a Javascript Timeline — toggle each action per event and set snap resolution for all drag operations.
- Next: [Cross-Instance Drag and Drop](https://demo.mobiscroll.com/javascript/timeline/drag-drop-between-calendar-instances.md) - Drag and drop events between two Javascript Timeline views to reassign resources or coordinate schedules — enable cross-timeline transfers.