Drag and Drop from External Lists

Dragging events on the Mobiscroll event calendar

Events can be scheduled by dragging and dropping an external item onto the event calendar with Mobiscroll draggable. In order for that to work you will need to have two things set up:

  • Enable the event calendar to receive external events by setting externalDrop to true.
  • Initialize the external events (containers) as draggable components.

Use the MbscDraggable component to specify a skeleton event through its dragData option and reference the draggable container in the element option. The dragData accepts a full event definition that will be added to the event calendar on drop. If omitted, a default event will be created.

Working together with SortableJS and Dragula lists

Mobiscroll provides built-in support for two widely used reorderable drag-and-drop list libraries: SortableJS and Dragula. If you are already using any of these libraries to reorder list items, they can be seamlessly integrated with the event calendar. 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 event calendar to receive external drops by setting externalDrop to true.
  • 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 event-create, event-created or event-create-failed 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 calendar and dropping them onto an external drop container. To activate this, you will need to:

  • Enable the calendar to allow dragging events out by setting externalDrag to true.
  • Initialize the dropcontainer

Use the MbscDropcontainer component and its item-drop 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 event-delete will be fired.

You can also use the event-drag-leave and event-drag-enter, and the drop container's item-drag-enter and item-drag-leave events to provide visual feedback or running custom logic during drag.

Learn more from the external drag & drop documentation.

Unscheduling events to SortableJS and Dragula lists

Dropping events from the Eventcalendar to SortableJS and 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 Third-party dragging support section in the documentation

Looking for external drag into a scheduler?  Check out this example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Drag items from external SortableJS or Dragula lists onto a event calendar to schedule events — or drag them out to unschedule.

Code

View code on GitHub 
<script setup>
import {
  dragulaDraggable,
  getJson,
  MbscDraggable,
  MbscDropcontainer,
  MbscEventcalendar,
  MbscToast,
  setOptions,
  sortableJsDraggable 
} from '@mobiscroll/vue'
import dragula from 'dragula'
import Sortable from 'sortablejs'
import { onMounted, onUnmounted, ref } from 'vue'
import 'dragula/dist/dragula.css'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const dragElements = ref([])
const dropCont = ref()
const sortableCont = ref([])
const sortableInstance = ref()
const dragulaCont = ref()
const drake = ref()
const myEvents = ref([])
const toastMessage = ref(null)
const isToastOpen = ref(false)

const myDraggableTasks = ref([
  {
    id: 1,
    title: 'Task 1',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 2,
    title: 'Task 2',
    color: '#cf4343',
    start: '2026-10-24T08:00',
    end: '2026-10-24T10:00'
  },
  {
    id: 3,
    title: 'Task 3',
    color: '#cf4343',
    start: '2026-10-24T10:00',
    end: '2026-10-24T14:00'
  },
  {
    id: 4,
    title: 'Task 4',
    color: '#cf4343',
    start: '2026-10-24T12:00',
    end: '2026-10-24T18:00'
  }
])

const mySortableTasks = ref([
  {
    id: 'sortable-1',
    title: 'Task 5',
    color: '#e49516',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'sortable-2',
    title: 'Task 6',
    color: '#e49516',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'sortable-3',
    title: 'Task 7',
    color: '#e49516',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'sortable-4',
    title: 'Task 8',
    color: '#e49516',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myDragulaTasks = ref([
  {
    id: 'dragula-1',
    title: 'Task 9',
    color: '#1ca11a',
    start: '2026-10-24T08:00',
    end: '2026-10-24T09:30'
  },
  {
    id: 'dragula-2',
    title: 'Task 10',
    color: '#1ca11a',
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00'
  },
  {
    id: 'dragula-3',
    title: 'Task 11',
    color: '#1ca11a',
    start: '2026-10-24T08:30',
    end: '2026-10-24T11:00'
  },
  {
    id: 'dragula-4',
    title: 'Task 12',
    color: '#1ca11a',
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00'
  }
])

const myView = {
  calendar: { labels: true }
}

function handleEventCreated(args) {
  if (args.action === 'externalDrop') {
    myDraggableTasks.value = myDraggableTasks.value.filter((item) => item.id !== args.event.id)
    mySortableTasks.value = mySortableTasks.value.filter((item) => item.id !== args.event.id)
    myDragulaTasks.value = myDragulaTasks.value.filter((item) => item.id !== args.event.id)
    toastMessage.value = args.event.title + ' added'
    isToastOpen.value = true
  }
}

function handleEventDeleted(args) {
  toastMessage.value = args.event.title + ' unscheduled'
  isToastOpen.value = true
}

function handleItemDrop(args) {
  if (args.data) {
    myDraggableTasks.value = [...myDraggableTasks.value, args.data]
  }
}

function getHours(event) {
  const eventLength = Math.round(
    Math.abs(new Date(event.end) - new Date(event.start)) / (60 * 60 * 1000)
  )
  return eventLength + ' hour' + (eventLength > 1 ? 's' : '')
}

function handleToastClose() {
  isToastOpen.value = false
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/drag-drop-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
  if (sortableCont.value) {
    sortableInstance.value = new Sortable(sortableCont.value, {
      animation: 150,
      forceFallback: true
    })

    sortableJsDraggable.init(sortableInstance.value, {
      cloneSelector: '.sortable-drag',
      externalDrop: true,
      onExternalDrop: (a) => {
        const dragData = a.dragData
        const newTasks = [...mySortableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        mySortableTasks.value = newTasks
      }
    })
  }

  if (dragulaCont.value) {
    drake.value = dragula([dragulaCont.value])
    dragulaDraggable.init(drake.value, {
      externalDrop: true,
      onExternalDrop: (a) => {
        const dragData = a.dragData
        const newTasks = [...myDraggableTasks.value]
        newTasks.splice(a.position, 0, dragData)
        myDraggableTasks.value = newTasks
      }
    })
  }
})

onUnmounted(() => {
  if (sortableInstance.value) {
    sortableInstance.value.destroy()
  }
  if (drake.value) {
    drake.value.destroy()
  }
})
</script>

<template>
  <div class="mbsc-grid mbsc-no-padding mds-full-height">
    <div class="mbsc-row mds-full-height">
      <div class="mbsc-col-sm-9 mds-drag-drop-sort-calendar mds-full-height">
        <MbscEventcalendar
          :view="myView"
          :data="myEvents"
          :dragToMove="true"
          :dragToCreate="true"
          :externalDrop="true"
          :externalDrag="true"
          @event-created="handleEventCreated"
          @event-deleted="handleEventDeleted"
        />
      </div>
      <div class="mbsc-col-sm-3 mds-drag-drop-sort-container-wrapper mds-full-height">
        <div class="mbsc-txt-muted mds-third-party-title">Mobiscroll draggable</div>
        <div ref="dropCont" class="mds-drag-drop-sort-container">
          <MbscDropcontainer :element="dropCont" @item-drop="handleItemDrop($event)">
            <div v-for="(task, i) in myDraggableTasks" :key="task.id">
              <div
                ref="dragElements"
                class="mds-drag-drop-sort-task"
                :style="{ background: task.color }"
              >
                <div>{{ task.title }}</div>
                <div>{{ getHours(task) }}</div>
                <MbscDraggable :element="dragElements[i]" :dragData="task" />
              </div>
            </div>
          </MbscDropcontainer>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">
          SortableJS list (externally draggable)
        </div>
        <div class="mds-drag-drop-sort-container" ref="sortableCont">
          <div
            v-for="task in mySortableTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
        <div class="mbsc-txt-muted mds-third-party-title">Dragula list (externally draggable)</div>
        <div class="mds-drag-drop-sort-container" ref="dragulaCont">
          <div
            v-for="task in myDragulaTasks"
            :key="task.id"
            class="mds-drag-drop-sort-task"
            :style="{ background: task.color }"
            :data-drag-data="JSON.stringify(task)"
          >
            <div>{{ task.title }}</div>
            <div>{{ getHours(task) }}</div>
          </div>
        </div>
      </div>
    </div>
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
  </div>
</template>

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

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.