DayPilot.Gantt.makeDraggable

The makeDraggable() method activates an external element so it can be dragged as a task to the JavaScript Gantt Chart component.

This method is static. Execute it using the full prefix, not on a DayPilot.Gantt class instance.

Available since 2024.4.6270.

Declaration

DayPilot.Gantt.makeDraggable(options)

Parameters

• options.data - source data object

• options.element (DOM element) - DOM node to activate for drag and drop

• options.remove (DOM element) - DOM node removed on drop; if not specified, options.element is used

• options.keepElement (boolean) - set to true to keep the original element in the DOM after 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

Notes

If options.remove is not specified, the original options.element is removed after a successful drop unless options.keepElement is set to true.

Example

<div id="item" data-id="1" data-duration="8">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>

See Also

External Drag and Drop of Tasks [doc.daypilot.org]

DayPilot.Gantt Class