Simplest Drag and Drop setup in React, in 10 lines of code with SortableJS

This page summarizes the projects mentioned and recommended in the original post on dev.to

InfluxDB – Built for High-Performance Time Series Workloads
InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
www.influxdata.com
featured
Sevalla - Deploy and host your apps and databases, now with $50 credit!
Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!
sevalla.com
featured
  1. sortablejs

    Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

    I went to look for SortableJS, clicked on the demo, scrolled to the grid example which was doing exactly the simple stuff I was looking for.

  2. InfluxDB

    InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

    InfluxDB logo
  3. react-beautiful-dnd

    Discontinued Beautiful and accessible drag and drop for lists with React

    React Beautiful Dnd: build by Atlassian for Trello, it's reliable BUT

  4. react-grid-layout

    A draggable and resizable grid layout with responsive breakpoints, for React.

    React Grid Layout: quite easy to setup, and quite powerful also. But I wanted to be able to move items in a grid so that it takes the position of another item in the grid and the grid keeps the same shape at the end of the drag/drop action - the defauilt behavior of this lib being to "make space" for the dragged item and break the grid layout. After spending one hour on it, I still couldn't find the way to achieve my goal, I quit.

  5. react-draggable

    React draggable component

    -react-draggable: I must say I didn't see that one, and didn't try.

  6. react-grid-dnd

    drag and drop, grid edition. built with react

    -react-grid-dnd: it looked like an easy setup and exactly want I was looking for, but... it's not maintained, and not working with npm7+ because it has react 16 as a dependency. So I had all the code setup before installing the lib, and I was quite fed up and tired when I discovered I would need to change my npm version to use it, or do some tricks here and there...

  7. react-sortablejs

    React bindings for SortableJS

    Then I thought : damn, there should be out there a JavaScript library doing the simple thing I've asked for ! And I saw in this last react-sortablejs that it was a "React bindings to SortableJS".

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • I made Webflow but for Python UI. Here's how I built it

    6 projects | dev.to | 3 Oct 2024
  • A feature-rich front-end drag-and-drop component library

    10 projects | news.ycombinator.com | 24 Apr 2024
  • Curious case of Drag and Drop

    3 projects | dev.to | 30 Jan 2024
  • How do you implement drag-select using React-DnD?

    2 projects | /r/reactjs | 9 Apr 2023
  • How to Drag and Drop in React

    2 projects | /r/reactjs | 14 Mar 2023