UI Kit

Drag and Drop

Explore accessible and flexible drag-and-drop experiences using mouse or keyboard.
These examples demonstrate how to implement sortable lists and rearrange items using the powerful and extensible @dnd-kit library.

Single-Column Sortable List

Reorder items in a single column using drag handles or keyboard navigation. Tab to an item, press Space or Enter to grab it, then use arrow keys to move.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Multi-Container Sort

Drag and drop items between multiple containers. Columns can also be reordered by dragging their headers.

To Do

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Done

Item 10
Item 11
Item 12
Item 13
Item 14

Vanilla JS Sort

No external libraries required—this example shows how to build basic drag-and-drop sorting with plain JavaScript.

To Do

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

import { useState } from "react";
import { clsx } from "clsx";
import {
  HvListContainer,
  HvListItem,
  HvListItemProps,
  HvTypography,
} from "@hitachivantara/uikit-react-core";
import {
  Battery,
  Cloud,
  Drag,
  Edit,
  Favorite,
  Fire,
  Ghost,
  Heart,
  Palette,
} from "@hitachivantara/uikit-react-icons";


interface Item {
  id: string;
  title: string;
  icon: React.ReactNode;
}


const sampleItems: Item[] = [
  { id: "item1", title: "Item 1", icon: <Ghost /> },
  { id: "item2", title: "Item 2", icon: <Cloud /> },
  { id: "item3", title: "Item 3", icon: <Battery /> },
  { id: "item4", title: "Item 4", icon: <Fire /> },
  { id: "item5", title: "Item 5", icon: <Ghost /> },
  { id: "item6", title: "Item 6", icon: <Palette /> },
  { id: "item7", title: "Item 7", icon: <Edit /> },
  { id: "item8", title: "Item 8", icon: <Heart /> },
  { id: "item9", title: "Item 9", icon: <Favorite /> },
];


export default function Demo() {
  const [items, setItems] = useState<Item[]>(sampleItems.filter((i) => i.id));
  const [draggedItem, setDraggedItem] = useState<Item>();
  const [dragging, setDragging] = useState(false);
  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);


  const onDragStart: HvListItemProps["onDragStart"] = (event) => {
    const draggedIndex = items?.findIndex(
      (i) => i.id === (event.target as any).id,
    );
    if (draggedIndex === -1) return;
    setDragging(true);
    setDraggedItem(items[draggedIndex]);
  };


  const onDragEnd: HvListItemProps["onDragEnd"] = (event) => {
    event.preventDefault();
    setDraggedItem(undefined);
    setDragging(false);
    setDraggedOverIndex(null);
  };


  const onDragOver = (event: React.DragEvent<HTMLLIElement>, index: number) => {
    event.preventDefault();
    setDraggedOverIndex(index);
  };


  const onDragLeave = () => {
    setDraggedOverIndex(null);
  };


  const onDrop: HvListItemProps["onDrop"] = (event) => {
    event.preventDefault();


    setDraggedOverIndex(null);
    setDraggedItem(undefined);


    const draggedIndex = items?.findIndex((i) => i === draggedItem);
    const droppedIndex =
      draggedOverIndex !== null ? draggedOverIndex : items.length;


    if (draggedIndex === -1 || droppedIndex === -1) return;


    const updatedItems = [...items];


    updatedItems.splice(draggedIndex, 1);


    // The first splice mutated the array so I'll updated the droppedIndex to take that into account
    const updatedDroppedIndex =
      droppedIndex > draggedIndex ? droppedIndex - 1 : droppedIndex;


    updatedItems.splice(updatedDroppedIndex + 1, 0, draggedItem as Item);


    setItems(updatedItems);
  };


  return (
    <div>
      <div className="w-250px p-md border-rounded-round">
        <div className="hover:cursor-grab">
          <HvTypography variant="title4">To Do</HvTypography>
        </div>
        <HvListContainer>
          {items?.map((item, index) => (
            <div key={item.id}>
              <HvListItem
                id={item.id}
                className={clsx(
                  "p-0 flex justify-between items-center b-1 border-border bg-bgContainer my-xs mx-0 hover:cursor-grab",
                  dragging &&
                    item.id === draggedItem?.id &&
                    "border-2 border-primary",
                )}
                draggable
                onDragStart={onDragStart}
                onDragEnd={onDragEnd}
                onDragOver={(e) => onDragOver(e, index)}
                onDragLeave={onDragLeave}
                onDrop={onDrop}
              >
                <div className="flex items-center gap-xs">
                  {item.icon}
                  {item.title}
                </div>
                <div className="hover:cursor-grab">
                  <Drag />
                </div>
              </HvListItem>
              {draggedOverIndex === index && (
                <div className="h-2px bg-primary mx-xs my-0" />
              )}
            </div>
          ))}
        </HvListContainer>
      </div>
    </div>
  );
}

import { useState } from "react";
import { clsx } from "clsx";
import {
  HvListContainer,
  HvListItem,
  HvListItemProps,
  HvTypography,
} from "@hitachivantara/uikit-react-core";
import {
  Battery,
  Cloud,
  Drag,
  Edit,
  Favorite,
  Fire,
  Ghost,
  Heart,
  Palette,
} from "@hitachivantara/uikit-react-icons";

interface Item {
  id: string;
  title: string;
  icon: React.ReactNode;
}

const sampleItems: Item[] = [
  { id: "item1", title: "Item 1", icon: <Ghost /> },
  { id: "item2", title: "Item 2", icon: <Cloud /> },
  { id: "item3", title: "Item 3", icon: <Battery /> },
  { id: "item4", title: "Item 4", icon: <Fire /> },
  { id: "item5", title: "Item 5", icon: <Ghost /> },
  { id: "item6", title: "Item 6", icon: <Palette /> },
  { id: "item7", title: "Item 7", icon: <Edit /> },
  { id: "item8", title: "Item 8", icon: <Heart /> },
  { id: "item9", title: "Item 9", icon: <Favorite /> },
];

export default function Demo() {
  const [items, setItems] = useState<Item[]>(sampleItems.filter((i) => i.id));
  const [draggedItem, setDraggedItem] = useState<Item>();
  const [dragging, setDragging] = useState(false);
  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);

  const onDragStart: HvListItemProps["onDragStart"] = (event) => {
    const draggedIndex = items?.findIndex(
      (i) => i.id === (event.target as any).id,
    );
    if (draggedIndex === -1) return;
    setDragging(true);
    setDraggedItem(items[draggedIndex]);
  };

  const onDragEnd: HvListItemProps["onDragEnd"] = (event) => {
    event.preventDefault();
    setDraggedItem(undefined);
    setDragging(false);
    setDraggedOverIndex(null);
  };

  const onDragOver = (event: React.DragEvent<HTMLLIElement>, index: number) => {
    event.preventDefault();
    setDraggedOverIndex(index);
  };

  const onDragLeave = () => {
    setDraggedOverIndex(null);
  };

  const onDrop: HvListItemProps["onDrop"] = (event) => {
    event.preventDefault();

    setDraggedOverIndex(null);
    setDraggedItem(undefined);

    const draggedIndex = items?.findIndex((i) => i === draggedItem);
    const droppedIndex =
      draggedOverIndex !== null ? draggedOverIndex : items.length;

    if (draggedIndex === -1 || droppedIndex === -1) return;

    const updatedItems = [...items];

    updatedItems.splice(draggedIndex, 1);

    // The first splice mutated the array so I'll updated the droppedIndex to take that into account
    const updatedDroppedIndex =
      droppedIndex > draggedIndex ? droppedIndex - 1 : droppedIndex;

    updatedItems.splice(updatedDroppedIndex + 1, 0, draggedItem as Item);

    setItems(updatedItems);
  };

  return (
    <div>
      <div className="w-250px p-md border-rounded-round">
        <div className="hover:cursor-grab">
          <HvTypography variant="title4">To Do</HvTypography>
        </div>
        <HvListContainer>
          {items?.map((item, index) => (
            <div key={item.id}>
              <HvListItem
                id={item.id}
                className={clsx(
                  "p-0 flex justify-between items-center b-1 border-border bg-bgContainer my-xs mx-0 hover:cursor-grab",
                  dragging &&
                    item.id === draggedItem?.id &&
                    "border-2 border-primary",
                )}
                draggable
                onDragStart={onDragStart}
                onDragEnd={onDragEnd}
                onDragOver={(e) => onDragOver(e, index)}
                onDragLeave={onDragLeave}
                onDrop={onDrop}
              >
                <div className="flex items-center gap-xs">
                  {item.icon}
                  {item.title}
                </div>
                <div className="hover:cursor-grab">
                  <Drag />
                </div>
              </HvListItem>
              {draggedOverIndex === index && (
                <div className="h-2px bg-primary mx-xs my-0" />
              )}
            </div>
          ))}
        </HvListContainer>
      </div>
    </div>
  );
}

Kanban Board

A more advanced drag-and-drop example with multiple columns and cards. You can move cards between columns and reorder both cards and columns freely.

To Do

Task 1

Some time ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae ex sem. Ut posuere nibh risus, vel pellentesque elit varius sed. Etiam eleifend consequat tortor, ac ultrices nunc viverra pretium. Praesent rutrum congue justo fermentum varius. Aenean malesuada magna ut purus tincidunt tempor. Quisque urna erat, finibus quis mi vitae, vehicula gravida dui. In vitae elementum felis, sed interdum nunc. Integer varius nibh ac congue rutrum. Pellentesque vel auctor risus. Cras quis sollicitudin odio.

Task 2

Some time ago

In Progress

Task 3

Some time ago

Task 4

Some time ago

In Review

Task 5

Some time ago

Task 6

Some time ago

Task 7

Some time ago

Reviewed

Task 8

Some time ago

Task 9

Some time ago

Task 9

Some time ago

import { useMemo, useState } from "react";
import {
  DndContext,
  DragEndEvent,
  DragOverEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { arrayMove, SortableContext } from "@dnd-kit/sortable";


import { ColumnContainer, TaskCard } from "./Components";
import { defaultColumns, defaultTasks } from "./data";
import { Column, Task } from "./types";


export default function Demo() {
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 2,
      },
    }),
  );


  const [tasks, setTasks] = useState<Task[]>(defaultTasks);
  const [columns, setColumns] = useState<Column[]>(defaultColumns);
  const [activeColumn, setActiveColumn] = useState<Column | null>(null);
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  const [creatingTask, setCreatingTask] = useState<boolean>(false);


  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);


  const onDragStart = (event: DragStartEvent) => {
    if (event.active.data.current?.type === "Column") {
      setActiveColumn(event.active.data.current.column);
    }


    if (event.active.data.current?.type === "Task") {
      setActiveTask(event.active.data.current.task);
    }
  };


  const onDragEnd = (event: DragEndEvent) => {
    setActiveColumn(null);
    setActiveTask(null);


    const { active, over } = event;
    if (!over) return;


    const activeId = active.id;
    const overId = over.id;


    if (activeId === overId) return;


    const isActiveAColumn = active.data.current?.type === "Column";
    if (!isActiveAColumn) return;


    setColumns((cs) => {
      const activeColumnIndex = cs.findIndex((col) => col.id === activeId);
      const overColumnIndex = cs.findIndex((col) => col.id === overId);


      return arrayMove(cs, activeColumnIndex, overColumnIndex);
    });
  };


  const onDragOver = (event: DragOverEvent) => {
    const { active, over } = event;
    console.log(active, over);
    if (!over) return;


    const activeId = active.id;
    const overId = over.id;


    if (activeId === overId) return;


    const isActiveATask = active.data.current?.type === "Task";
    const isOverATask = over.data.current?.type === "Task";


    if (!isActiveATask) return;


    // Dropping a Task over another Task
    if (isActiveATask && isOverATask) {
      setTasks((ts) => {
        const activeIndex = ts.findIndex((t) => t.id === activeId);
        const overIndex = ts.findIndex((t) => t.id === overId);


        if (ts[activeIndex].columnId !== ts[overIndex].columnId) {
          ts[activeIndex].columnId = ts[overIndex].columnId;
          return arrayMove(ts, activeIndex, overIndex - 1);
        }


        return arrayMove(ts, activeIndex, overIndex);
      });
    }


    const isOverAColumn = over.data.current?.type === "Column";


    // Dropping a Task over a Column
    if (isActiveATask && isOverAColumn) {
      setTasks((ts) => {
        const activeIndex = ts.findIndex((t) => t.id === activeId);


        ts[activeIndex].columnId = overId.toString();
        return arrayMove(ts, activeIndex, activeIndex);
      });
    }
  };


  const addTask = async (columnId: string) => {
    try {
      setCreatingTask(true);


      const highestId = tasks.reduce((acc, task) => {
        const taskId = Number.parseInt(task.id.replace("task", ""), 10);
        return taskId > acc ? taskId : acc;
      }, 0);


      setTasks((ts) => [
        ...ts,
        {
          id: `task${highestId + 1}`,
          columnId,
          title: `Task ${highestId + 1}`,
        },
      ]);
    } finally {
      setCreatingTask(false);
    }
  };


  const deleteTask = (taskId: string) => {
    const newTasks = tasks.filter((task) => task.id !== taskId);
    setTasks(newTasks);
  };


  return (
    <div className="mt-md">
      <DndContext
        sensors={sensors}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onDragOver={onDragOver}
      >
        <div className="flex gap-sm">
          <SortableContext items={columnsId}>
            {columns.map((column) => (
              <ColumnContainer
                key={column.id}
                column={column}
                tasks={tasks.filter((task) => task.columnId === column.id)}
                addTask={addTask}
                deleteTask={deleteTask}
                addEnabled={!creatingTask}
              />
            ))}
          </SortableContext>
        </div>


        <DragOverlay>
          {activeColumn && (
            <ColumnContainer
              column={activeColumn}
              tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
            />
          )}
          {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} />}
        </DragOverlay>
      </DndContext>
    </div>
  );
}

import { useMemo, useState } from "react";
import {
  DndContext,
  DragEndEvent,
  DragOverEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { arrayMove, SortableContext } from "@dnd-kit/sortable";

import { ColumnContainer, TaskCard } from "./Components";
import { defaultColumns, defaultTasks } from "./data";
import { Column, Task } from "./types";

export default function Demo() {
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 2,
      },
    }),
  );

  const [tasks, setTasks] = useState<Task[]>(defaultTasks);
  const [columns, setColumns] = useState<Column[]>(defaultColumns);
  const [activeColumn, setActiveColumn] = useState<Column | null>(null);
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  const [creatingTask, setCreatingTask] = useState<boolean>(false);

  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);

  const onDragStart = (event: DragStartEvent) => {
    if (event.active.data.current?.type === "Column") {
      setActiveColumn(event.active.data.current.column);
    }

    if (event.active.data.current?.type === "Task") {
      setActiveTask(event.active.data.current.task);
    }
  };

  const onDragEnd = (event: DragEndEvent) => {
    setActiveColumn(null);
    setActiveTask(null);

    const { active, over } = event;
    if (!over) return;

    const activeId = active.id;
    const overId = over.id;

    if (activeId === overId) return;

    const isActiveAColumn = active.data.current?.type === "Column";
    if (!isActiveAColumn) return;

    setColumns((cs) => {
      const activeColumnIndex = cs.findIndex((col) => col.id === activeId);
      const overColumnIndex = cs.findIndex((col) => col.id === overId);

      return arrayMove(cs, activeColumnIndex, overColumnIndex);
    });
  };

  const onDragOver = (event: DragOverEvent) => {
    const { active, over } = event;
    console.log(active, over);
    if (!over) return;

    const activeId = active.id;
    const overId = over.id;

    if (activeId === overId) return;

    const isActiveATask = active.data.current?.type === "Task";
    const isOverATask = over.data.current?.type === "Task";

    if (!isActiveATask) return;

    // Dropping a Task over another Task
    if (isActiveATask && isOverATask) {
      setTasks((ts) => {
        const activeIndex = ts.findIndex((t) => t.id === activeId);
        const overIndex = ts.findIndex((t) => t.id === overId);

        if (ts[activeIndex].columnId !== ts[overIndex].columnId) {
          ts[activeIndex].columnId = ts[overIndex].columnId;
          return arrayMove(ts, activeIndex, overIndex - 1);
        }

        return arrayMove(ts, activeIndex, overIndex);
      });
    }

    const isOverAColumn = over.data.current?.type === "Column";

    // Dropping a Task over a Column
    if (isActiveATask && isOverAColumn) {
      setTasks((ts) => {
        const activeIndex = ts.findIndex((t) => t.id === activeId);

        ts[activeIndex].columnId = overId.toString();
        return arrayMove(ts, activeIndex, activeIndex);
      });
    }
  };

  const addTask = async (columnId: string) => {
    try {
      setCreatingTask(true);

      const highestId = tasks.reduce((acc, task) => {
        const taskId = Number.parseInt(task.id.replace("task", ""), 10);
        return taskId > acc ? taskId : acc;
      }, 0);

      setTasks((ts) => [
        ...ts,
        {
          id: `task${highestId + 1}`,
          columnId,
          title: `Task ${highestId + 1}`,
        },
      ]);
    } finally {
      setCreatingTask(false);
    }
  };

  const deleteTask = (taskId: string) => {
    const newTasks = tasks.filter((task) => task.id !== taskId);
    setTasks(newTasks);
  };

  return (
    <div className="mt-md">
      <DndContext
        sensors={sensors}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onDragOver={onDragOver}
      >
        <div className="flex gap-sm">
          <SortableContext items={columnsId}>
            {columns.map((column) => (
              <ColumnContainer
                key={column.id}
                column={column}
                tasks={tasks.filter((task) => task.columnId === column.id)}
                addTask={addTask}
                deleteTask={deleteTask}
                addEnabled={!creatingTask}
              />
            ))}
          </SortableContext>
        </div>

        <DragOverlay>
          {activeColumn && (
            <ColumnContainer
              column={activeColumn}
              tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
            />
          )}
          {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} />}
        </DragOverlay>
      </DndContext>
    </div>
  );
}