Show HN: A cool Drag-and-Drop implementation for Svelte

• svelte-dnd-action

  11 1,625 7.4 JavaScript

  An action based drag and drop container for Svelte

The readme talks about it being keyboard operable and screen reader supporting but I couldn't make it work in the couple of REPLs I tried. The description of how keyboard operation is supposed to work looks good, uses standard keys.

https://github.com/isaacHagoel/svelte-dnd-action#accessibili...

• react-beautiful-dnd

  71 32,416 0.6 JavaScript

  Beautiful and accessible drag and drop for lists with React

  

Not sure how similar it is, but [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) is pretty nice.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• dflex

  129 1,727 8.4 TypeScript

  The sophisticated Drag and Drop library you've been waiting for 🥳

  

I share your disappointment and I'd like to invite you to DFlex (https://github.com/jalal246/dflex). It's not perfect and in the development process but I think it's a real alternative to native-like API focused on performance and easy implementation. It's just a pure js. So every fix should enhance all framework implementations. Decoupled with a separate package to prevent a bloated bundle. Work with mouse event, so nothing new to learn. And most importantly it's just a utility. You can use what you want. Finally, it doesn't sort, move,s or whatsoever. Node positions are stored separately. Each movement calculates the current position and triggers any effect that movement caused. So It may cause "dragging only with zero effect" Or "Switch with another element". It has also container/children architecture. So you can drag a child, or parent..etc

• dnd-kit

  43 11,358 4.9 TypeScript

  The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

One of the up and coming React DnD projects is https://github.com/clauderic/dnd-kit. It's still 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.

• draggable

  13 17,494 8.0 JavaScript

  The JavaScript Drag & Drop library your grandparents warned you about.

  

React kit is implementation of Shopify 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 solution can expose DOM elements to you because you probably need to do more than dragging element on your layout.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project