DayPilot.Scheduler.makeDraggable

The makeDraggable() method allows activating external items so they can be dragged to the JavaScript Scheduler component as events. It supports dragging using touch devices as well. See more at external drag and drop [doc.daypilot.org].

This method is static. It has to be executed using the full prefix (not on a DayPilot.Scheduler class instance).

Declaration

DayPilot.Scheduler.makeDraggable(options);

Parameters

• options.onDragStart - event handler that will be fired on drag start (args.options, args.preventDefault()); optional

• options.onDrop - event handler that will be fired on drop (args.options); optional

• options.data - the source data object; since 2021.2.4941 (in prior versions, add id, text, and duration to options)

• options.element (DOM element) - the element to be activated for drag and drop

• options.remove (DOM element) - the element to be removed on drop; if not specified, options.element will be used

• options.keepElement (boolean) - set to true if the original element should not be removed from DOM on drop; optional

• options.externalCssClass (string) - CSS class that will be applied to the moving shadow (when it is outside of the Scheduler); optional

• options.externalCursor (string) - cursor that will be used during external drag and drop (CSS format); available since 2024.4.6293

• options.externalHtml (string) - HTML that will be added to the moving shadow (when it is outside of the Scheduler); optional

The source data object (options.data) requires the following properties:

• id (string | number) - event ID

• text (string) - event text

• duration (number | DayPilot.Duration) - event duration; you can also supply start and end properties instead of duration

All other properties of options.data will be copied to the target object (and available in onEventMove as properties of args.e.data)

Example

<div id="item" data-id="1" data-duration="60">Draggable item</div>

<script>
  const e = document.getElementById("item");

  const item = {
    element: e,
    data: {
      id: e.getAttribute("data-id"),
      text: e.innerText,
      duration: e.getAttribute("data-duration")
    }
  };
  DayPilot.Scheduler.makeDraggable(item);
</script>