---
title: "Javascript Scheduler External Drag and Drop Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/external-drag-drop-sortable-dragula"
---
# External Drag and Drop - JavaScript Scheduler demo
Connect SortableJS or Dragula lists to the Javascript Scheduler — drag items in to schedule events and drag events out to unschedule them. Plain JS api for usage everywhere.
- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/external-drag-drop-sortable-dragula)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/external-drag-drop-sortable-dragula)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/external-drag-drop-sortable-dragula.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/external-drag-drop-sortable-dragula.md), [React](https://demo.mobiscroll.com/react/scheduler/external-drag-drop-sortable-dragula.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/external-drag-drop-sortable-dragula.md)
## Description
**Dragging events on the Mobiscroll event calendar**
Events can be scheduled by dragging and dropping an external item onto the scheduler with Mobiscroll `draggable`. In order for that to work you will need to have two things set up:
- Enable the scheduler to receive external events by setting [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) to `true`.
- Initialize the external events (containers) as `draggable` components.
Set up a container as draggable with the `mbsc-draggable` attribute. Pass a skeleton event definition through the `data-drag-data` attribute as a stringified json object. This will be added to the event calendar on drop. If omitted, a default event will be created. For a more programmatic approach you might want to use the component initialization where the `draggable` is initialized in js code and the `dragData` can be passed as an object.
**Working together with SortableJS and Dragula lists**
Mobiscroll provides built-in support for two widely used reorderable drag-and-drop list libraries: [SortableJS](https://sortablejs.github.io/Sortable/) and [Dragula](https://bevacqua.github.io/dragula/). If you are already using any of these libraries to reorder list items, they can be seamlessly integrated with the scheduler. This integration enables a smooth workflow where items can be dragged from external lists and scheduled directly onto the calendar.
Events can be created and scheduled by dragging items from third-party lists into the event calendar. To enable this behavior you will need to:
- Allow the scheduler to receive external drops by setting [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop).
- Use the `sortableJsDraggable` or `dragulaDraggable` plugins to connect the third-party list with the scheduler.
The event data will be read from the dragged element's `data-drag-data` attribute, or the plugin's options expose an `eventData` function where the event definition (title, start, end, resource, etc.) can be specified.
You can then handle the calendars lifecycle events such as [`onEventCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreate), [`onEventCreated`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreated) or [`onEventCreateFailed`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreateFailed) to run custom logic (e.g. showing a toast) when a drop succeeds or fails.
**Unscheduling events (or dragging them off a calendar)**
Additionally events can be unscheduled by dragging them out from the scheduler and dropping them onto an external drop container. To activate this, you will need to:
- Enable the scheduler to allow dragging events out by setting [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) to `true`.
- Initialize the [`dropcontainer`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#dropcontainer).
Use the [`dropcontainer`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#dropcontainer) component and its [`onItemDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#event-onItemDrop) event to handle dropped events.
Events can also be dropped on another event calendar with `externalDrop` enabled.
When an event is dropped into an external drop container or another calendar, it will be deleted from the original calendar and the [`onEventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDelete) will be fired.
You can also use the [`onEventDragLeave`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDragLeave) and [`onEventDragEnter`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDragEnter), and the drop container's `onItemDragEnter` and `onItemDragLeave` events to provide visual feedback or running custom logic during drag.
Learn more from the [external drag & drop documentation](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#the-eventcalendar-as-source).
**Unscheduling events to SortableJS and Dragula lists**
Dropping events from the Eventcalendar to [SortableJS](https://sortablejs.github.io/Sortable/) and [Dragula](https://bevacqua.github.io/dragula/) lists is also possible with the `sortableJsDraggable` and `dragulaDraggable` plugins. To enable this behavior you will need to set the following under the `options` configuration:
- Allow the list to receive external drops by setting `externalDrop` to `true`
- Use the `onExternalDrop` callback to update the content of the third-party list. The function arguments return the `afterElement` - the list element before which the clone is dropped,
`container` - the list container, `dragData` - the dragged event data, `position` - the index where the clone is dropped on the list.
For details, and option lists see the [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) section in the documentation
**Looking for external drag into a calendar?** [Check out this example →](https://demo.mobiscroll.com/javascript/eventcalendar/external-drag-drop-sortable-dragula)
## What this demo shows
- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **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 weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **External lists** A scrollable panel on the right contains three external event lists: `Mobiscroll draggable` with four red items, `SortableJS list (externally sortable)` with four yellow items, and `Dragula list (externally sortable)` with four green items.
- **Scheduling from lists** Any item from the external lists can be dragged onto the scheduler to create and schedule that event on the target time.
- **Unscheduling back to lists** Scheduled events can be dragged out of the scheduler and dropped back into an external list, removing them from the week view.
- **List behavior** When an item is scheduled from an external list, it disappears from that list and appears on the scheduler.
- **Feedback on drop** After an event is scheduled from an external list, a toast appears near the bottom center of the scheduler showing the event title and the `added` meesage.
- **Feedback on externap list drop** After an event is unscheduled from the scheduler and dropped on the external list a toast appears near the bottom center of the scheduler showing the event title and the `unscheduled` message.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **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
- **Unscheduled work queues** Managing tasks, appointments, or work items that start in an external backlog and need to be placed onto specific times.
- **Desktop planning workflows** Weekly scheduler experiences where users need a time-grid view together with a side panel of draggable items.
- **Schedule and unschedule flows** Use cases where users assign items to the scheduler, then move them back out to return them to an unscheduled state.
- **Third-party drag-and-drop integration** Projects that combine Mobiscroll Eventcalendar with existing `SortableJS` or `Dragula` list implementations.
## 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
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`externalDrop`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrop) - option
- [`externalDrag`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-externalDrag) - option
- [`onEventCreated`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventCreated) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDeleted) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var draggedTask;
function addToExternalList(args) {
var afterElement = args.afterElement;
var dragData = args.dragData;
var eventLength = Math.abs(Math.abs(new Date(dragData.end).getTime() - new Date(dragData.start).getTime()) / (60 * 60 * 1000));
var newItem = document.createElement('div');
newItem.className = 'mds-drag-drop-sort-task';
newItem.style.background = dragData.color || '';
newItem.setAttribute('data-drag-data', JSON.stringify(dragData));
newItem.innerHTML = '' + dragData.title + '
' + eventLength + ' hour' + (eventLength > 1 ? 's' : '') + '
';
args.container.insertBefore(newItem, afterElement || null);
}
var myCalendar = mobiscroll.eventcalendar('#demo-drag-drop-sortable-dragula', {
view: {
scheduler: { type: 'week' },
},
dragToMove: true,
dragToCreate: true,
externalDrop: true,
externalDrag: true,
onEventCreated: function (args) {
if (draggedTask && args.action === 'externalDrop') {
draggedTask.remove();
}
mobiscroll.toast({
message: args.event.title + ' added',
});
var elm = document.getElementById('mds-event-' + args.event.id);
if (elm) {
elm.remove();
}
},
onEventDeleted: function (args) {
mobiscroll.toast({
message: args.event.title + ' unscheduled',
});
},
});
mobiscroll.dropcontainer('#external-drop-cont', {
onItemDrop: function (args) {
if (args.data) {
var event = args.data;
var eventLength = Math.round(Math.abs(new Date(event.end) - new Date(event.start)) / (60 * 60 * 1000));
var elm = document.createElement('div');
elm.setAttribute('id', 'mds-event-' + event.id);
elm.classList.add('mds-drag-drop-sort-task');
elm.style.background = event.color;
elm.innerHTML = '' + event.title + '
' + eventLength + ' hour' + (eventLength > 1 ? 's' : '') + '
';
document.getElementById('mds-event').appendChild(elm);
mobiscroll.draggable('#mds-event-' + event.id, {
dragData: event,
});
}
},
});
var sortableInstance = new Sortable(document.getElementById('demo-sortable-list'), {
animation: 150,
forceFallback: true,
onStart: function (e) {
draggedTask = e.item;
},
onEnd: function () {
setTimeout(function () {
draggedTask = null;
});
},
});
mobiscroll.sortableJsDraggable.init(sortableInstance, {
cloneSelector: '.sortable-drag',
externalDrop: true,
onExternalDrop: function (args) {
addToExternalList(args);
},
});
var drake = dragula([document.getElementById('demo-dragula-list')]);
drake.on('drag', function (e) {
draggedTask = e;
});
drake.on('cancel', function () {
draggedTask = null;
});
drake.on('drop', function () {
setTimeout(function () {
draggedTask = null;
});
});
mobiscroll.dragulaDraggable.init(drake, {
externalDrop: true,
onExternalDrop: function (args) {
addToExternalList(args);
},
});
mobiscroll.getJson(
'https://trial.mobiscroll.com/drag-drop-events/',
function (events) {
myCalendar.setEvents(events);
},
'jsonp',
);
```
### HTML
```html
Mobiscroll draggable
SortableJS list (externally sortable)
Dragula list (externally sortable)
```
### CSS
```css
.mds-full-height {
height: 100%;
}
.mds-drag-drop-sort-calendar {
border-right: 1px solid #ccc;
}
.mds-drag-drop-sort-container {
margin: 10px;
}
.mds-drag-drop-sort-container-wrapper {
overflow: auto;
}
.mds-third-party-title {
margin-top: 12px;
padding: 0 20px;
font-size: 16px;
font-weight: 600;
}
.mds-drag-drop-sort-task {
margin: 10px;
padding: 10px;
touch-action: none;
color: #fff;
border-radius: 8px;
font-family: -apple-system, Segoe UI, Roboto, sans-serif;
}
```
## Implementation notes
- Use `view: { scheduler: { type: 'week' } }`. Enable `externalDrop: true`, `externalDrag: true`, `dragToMove: true`, `dragToCreate: true`. Load events via `getJson` from a JSONP endpoint on mount.
- The sidebar has three separate task lists, each demonstrating a different integration path:
- **Mobiscroll Draggable** (red, tasks 1-4): wrap each item with `Draggable` (Angular: `mbsc-draggable` directive, Vue: `MbscDraggable`) passing `dragData` set to the event object. Wrap the list in a `Dropcontainer` with `onItemDrop` to re-add events dragged back from the calendar.
- **SortableJS** (orange, tasks 5-8): `new Sortable(container, { animation: 150, forceFallback: true })`; call `sortableJsDraggable.init(sortableInstance, { externalDrop: true, onExternalDrop })` to connect to the calendar and handle back-drops.
- **Dragula** (green, tasks 9-12): `dragula([container])`; call `dragulaDraggable.init(drake, { externalDrop: true, onExternalDrop })`.
- On `onEventCreated`, if `args.action === 'externalDrop'`, remove the item by id from all three task arrays and show a toast with the event title + " added".
- On `onEventDeleted`, show a toast with the event title + " unscheduled".
- Each task list is its own state array; items disappear when dropped onto the calendar and reappear when dragged back via `onItemDrop` / `onExternalDrop`.
## 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: [Prevent Double Booking](https://demo.mobiscroll.com/javascript/scheduler/prevent-double-booking-events.md) - Use the Javascript Scheduler to block event overlaps per event, per resource, or globally — with toast notifications when a conflict is blocked.
- Next: [External Task Presets](https://demo.mobiscroll.com/javascript/scheduler/external-event-presets.md) - Drag task templates from an external list onto the Javascript Scheduler — schedule, assign a technician in a popup, and block drops on restricted slots.