A Guide to Modern Front‑End Drag‑And‑Drop Libraries and Migration Strategies

Recently the popular React drag‑and‑drop library react‑beautiful‑dnd announced it will be deprecated, prompting its author to create a newer solution called Pragmatic Drag and Drop , which aims to improve performance, flexibility, and accessibility.

Before its discontinuation, react‑beautiful‑dnd enjoyed around 1.63 million weekly npm downloads , making it a staple in many front‑end projects.

Developers who still wish to use react‑beautiful‑dnd have several options:

Fork the project or apply custom patches with patch-package .

Migrate to an actively maintained fork of the library.

Explore alternative solutions such as dnd‑kit or react‑dnd .

Switch to Pragmatic Drag and Drop, either manually or via the official migration package.

Vue ecosystem : VueDraggablePlus supports both Vue 2 and Vue 3, is recommended by Evan You, and is built on top of SortableJS, which has become outdated for Vue 3.

React ecosystem :

dnd‑kit is a modern, lightweight, high‑performance, and accessible drag‑and‑drop library for React with roughly 2 million weekly npm downloads . Example usage:

import React, { useState } from 'react';
import { DndContext } from '@dnd-kit/core';
import { Draggable } from './Draggable';
import { Droppable } from './Droppable';

function Example() {
  const [parent, setParent] = useState(null);
  const draggable =
Go ahead, drag me.
;
  return (
{!parent ? draggable : null}
{parent === "droppable" ? draggable : 'Drop here'}
);

  function handleDragEnd({ over }) {
    setParent(over ? over.id : null);
  }
}

GitHub: https://github.com/clauderic/dnd-kit

react‑dnd was created by Dan Abramov (core author of React and Redux) and also sees about 2 million weekly downloads . Example usage:

import React from 'react';
import { useDrag } from 'react-dnd';
import { ItemTypes } from './Constants';

export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(() => ({
    type: ItemTypes.CARD,
    item: { text },
    collect: (monitor) => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  }));
  return (
{text}
);
}

GitHub: https://github.com/react-dnd/react-dnd

Framework‑agnostic options :

pragmatic‑drag‑and‑drop is the low‑level toolchain behind the new library, usable with React, Vue, Svelte, Angular, etc., and powers products like Jira and Confluence.

Swapy is a brand‑new, framework‑independent drag‑and‑drop library that gained over 6 k stars in just three months and continues to grow rapidly.

These alternatives provide developers with up‑to‑date, performant, and accessible drag‑and‑drop solutions for modern front‑end applications.