I was researching drag and drop in JS recently, and what I found seemed pretty disappointing. Wondering if anyone can reinforce my opinion or counter it.

Drag and drop still seems like a mess. Browser support and touch support varies so you can't just use native APIs. Every popular library sits with tons of open issues and open PRs. Corporate solutions that have been open sourced appear abandoned. All the libraries I saw clocked in over 100kb.

Am I wrong? I want the "preact" or "day.js" drag and drop library. 10kb or less poly fill that gives me the basics. Does that exist?

JMTQp8lwXL

One of the up and coming React DnD projects is https://github.com/clauderic/dnd-kit. It's still in beta, and the drag/drop animations are rough around the edges, but it appears to be targeting an enterprise-grade set of features, including accessibility support.

Its core + plugin model will likely be the closest you can get to bundle size minimization.

Until the situation improves, for production, I use react-beautiful-dnd.

Long term, I think this might actually be a good problem to be solved in web components (e.g., using something like Stencil), then output targets for React, Svelte, Angular, etc can be generated.

jimmy2020

React kit is an implementation of Shopify's famous package: https://github.com/Shopify/draggable It's great but complicated with strict API. While react-beautiful-dnd is so React-ish. To manipulate DOM you need pure js with a solution can expose DOM elements to you because you probably need to do more than dragging an element on your layout.