DayPilot.Gantt.makeDraggable

The makeDraggable() method allows activating external items so they can be dragged as tasks to the JavaScript Gantt Chart component.

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

Available since 2024.4.6270.

Declaration

DayPilot.Gantt.makeDraggable(options);

Parameters

• options.data - the source data object

• 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

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

• id (string | number) - resource ID

• text (string) - task text

• duration (DayPilot.Duration) - task duration

Example

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

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

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