React Drag and Drop libraries, What should you choose?

What is DnD?

  • Keep the start position of the drag started element.
  • When the user drops the element in a new position. We can calculate the difference in the cursor movement. (delta)
  • Then calculate the new position of the element using the start position and the current cursor position.
  • Then set new position values to the DOM element.

Actually, do we need an additional library?

What are the libraries available?

react-beautiful-dnd

react-dnd

react- draggable

react-dnd-kit (beta — 6/27/2021)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store