Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Documentation code for Sortable with Typescript not working

See original GitHub issue

I am playing around with the library in a project (which uses TypeScript).

The code in the Quick start section for a simple drag-and-drop works, but with this code, nothing moves and there is no interactivity.

I am going on a few hours without being able to find out what is wrong. I would be very happy to accept some pointers 😃

The code below contains two components that are to a large extent just taken stright out of the documentation for Sortable.

There are no errors in the console, and everything compiles.

import { DndContext, MouseSensor, useSensor, useSensors } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import React, { ReactNode, useState } from "react";

export const ExpSortable = () => {
  const [items, setItems] = useState(["1", "2", "3"]);
  const sensors = useSensors(
    useSensor(MouseSensor, {
      activationConstraint: {
        distance: 10

  return (
    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
      <SortableContext items={items}>
        { => (
          <SortableItem key={id} id={id}>
            <p>hello from {id}</p>

  function handleDragEnd(event: any) {
    const { active, over } = event;
    console.log("drag end!");
    if ( !== {
      setItems((items) => {
        const oldIndex = items.indexOf(;
        const newIndex = items.indexOf(;
        return arrayMove(items, oldIndex, newIndex);

export function SortableItem(props: { children?: ReactNode; id: string }) {
  const { listeners, setNodeRef, transform, transition } = useSortable({

  const style = {
    padding: "5vmin",
    background: "orange",
    border: "2px solid",
    transform: CSS.Transform.toString(transform),
  } as React.CSSProperties;

  return (
    <div ref={setNodeRef} style={style} {...listeners}>

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:22 (7 by maintainers)

github_iconTop GitHub Comments

xorander00commented, Apr 13, 2021


I pretty much just followed the quick start guide. The basic gist is to create two components, one that wraps useDroppable and another that wraps useDraggable. Then use the components with a unique id for each instance and wrap the whole thing in DndContext. I also have DragOverlay as a sibling to my container of draggables & droppables.

I can give you my example code, but I’ll have to do it later and it might just be faster to follow the quick start guide.

rawcompositioncommented, Apr 5, 2021

Thanks! npx yarn-deduplicate didn’t seem to work, but uninstalling all of the @dnd-kit packages and re-installing them did the trick.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript sort by date not working - Stack Overflow
Try using the Date.getTime() method: public sortByDueDate(): void { this.myArray.sort((a: TaskItemVO, b: TaskItemVO) => { return a.dueDate.getTime() - b.
Read more >
Ultimate guide to sorting in Javascript and Typescript
In this article, I'll try to explain how sorting works in the TypeScript and JavaScript world, show you some real-life examples and speak ......
Read more >
Documentation - TypeScript 4.9
In TypeScript 4.3, we introduced a command called “Sort Imports” which would only sort imports in the file, but not remove them -...
Read more >
How to Sort Imports in TypeScript Automatically in VS Code
How to sort TypeScript imports in 3 easy steps. Step 1- Install Extension. You can install the extension either from the VS Code...
Read more >
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found