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
}) => 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.
info

For handling the actions you can use the Event Bus methods

Example​

import React, { useRef, useEffect } from "react";
import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const App = () => {
  const apiRef = useRef();
  const data = getData();

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("drag-task", ev => {
        console.log("The id of the dragged task:", ev.id);
      });
    }
  }, [apiRef.current]);

  return (
    <Gantt
      ref={apiRef}
      tasks={data.tasks}
      links={data.links}
      //other settings
    />
  );
};

export default App;

Related articles: How to access Gantt API