Skip to main content

drag-task

Description​

Fires when dragging a task

Usage​

"drag-task": ({
   id: string | number,
   width?: number,
   left?: number,
   top?: number,
   inProgress?: boolean,

   //Pro feature
   segmentIndex?: number
}) => boolean|void;

Parameters​

The callback of the drag-task action takes an object with the following parameters:

  • id - (required) an ID of the task that is dragged
  • width - (optional) specifies the value (in pixels) by which the task width has changed during dragging
  • left - (optional) specifies the number of pixels the task was dragged to the left
  • top - (optional) specifies the number of pixels the task was dragged to the top
  • inProgress - (optional) true marks that the process of moving a task is still in progress (a task is being dragged by user); false specified that a user has released a mouse after after dragging a task
  • segmentIndex - PRO feature (optional) the index of the segment being dragged (only for split tasks)
info

For handling the actions you can use the Event Bus methods. Returning false from the action handler will block the action (see Preventing actions)

Example​

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/svelte-gantt";
  
  const data = getData();

  function init(api) {
   api.on("drag-task", ev => {
    console.log("The id of the dragged task:", ev.id);
   });
  }
</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  {init} />

Preventing draggin task​

You can intercept the action and return false to block it:

api.intercept("drag-task", ev => {
  if (!allowDrag) return false; // prevents dragging
});

Related articles: