Skip to main content

move-task

Description​

Fires when moving a task
info

In a grouped tree (groupBy), move-task doesn't change the original task structure. The underlying tree stays as it was. To move a task between groups, use update-task (when grouped by a task field) or add-assignment / delete-assignment (when grouped by resource).

Usage​

"move-task": ({
   id:  string | number,
   mode: "before" | "after" | "up" | "down" | "child",
   target?: string | number,
   source?: string | number,
   inProgress?: boolean
}) => boolean|void;

Parameters​

The callback of the move-task action can take an object with the following parameters:

  • id - (required) the task ID
  • mode - (required) specifies where to move a task with the next values:
    • up - move up
    • down - move down
    • before - move before the target task if the target task id is specified
    • after - move after the target task if the target task id is specified
    • child - move to a new parent
  • target - (optional) the id of a task before/after which to move the current task
  • source - (optional) the id of a source task that is moved
  • 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. Returning false from the action handler will block the action (see Preventing actions)

Example​

Use the api.exec() method to trigger the action:

<script setup>
  import { ref } from "vue";
  import { getData } from "./common/data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import { Button } from "@svar-ui/vue-wx";
  
  const data = getData();
  
  const api = ref(null);
  function handleMove(mode) {
   const selected = api.value.getState().selected;
   api.value.exec("move-task", { id: selected, mode });
  }
  
</script>

<template>
  <Button
     type="primary"
     :onclick="() => {
      handleMove('up');
     }">
    Move task up
  </Button>
  <Gantt
    :tasks="data.tasks"
    ref="api" />
</template>

Related articles: