react-dnd VS draggable

react-dnd is quite powerful but a bit complex and requires some getting used to.

The library is fairly simple to use with lots of interesting, and innovative use cases in real world applications. It has more than 19K stars on GitHub and more than 1.8 million weekly downloads on NPM as of August 2023.

Explore complex drag-and-drop interactions with React DnD. Perfect for building intricate interfaces.

https://github.com/react-dnd/react-dnd https://github.com/atlassian/react-beautiful-dnd

React DnD.

react-dnd: This is very popular, but it’s a bit complex to use.

I recently had to look through the wild and decide which drag and drop library works best for our use-cases. After skimming through the APIs and the github pages of some of the popular libraries, I decided to explore and play around with react-dnd and react-beautiful-dnd. This post covers the contrast between the 2 really amazing libraries.

MDN - HTML5 Drag and Drop API React DnD

In this article we are going to use one of the drag n drop library for react. There are few good drag n drop libraries for react like react-dnd, dnd-kit & react-beautiful-dnd.

Has anyone ever been able to test the drag-and-drop functionality from https://github.com/react-dnd/react-dnd using a functional component with useDrag and useDrop hooks?

It's an almost great library but last I checked it doesn't support nested draggables: https://github.com/Shopify/draggable/issues/129

This led me to create my own library around SortableJS a year ago: https://github.com/MaxLeiter/sortablejs-vue3#why-not-use-oth...

Last time I did this a few years ago with jquery-ui-sortable: https://blog.corsego.com/ruby-on-rails-sexy-basic-trello-clone. I haven't tried doing this with any other modern drag-and-drop libraries, but I think my next go-to would be https://shopify.github.io/draggable/

My startup team is working on a new project and elected Tailwind this week. Konsta looks like a great fit as we want to work well on mobile.

Wondering if there are plans to add a grid system and/or drag+drop? We're looking to implement an Instagram like grid of cards and currently using DraggableJS https://shopify.github.io/draggable. Having an integrated solution would help us avoid haphazard glue code.

Draggable has the... funkiest examples btw. Like 3D dragging funky.

For vanilla js maybe something like https://shopify.github.io/draggable/ or https://interactjs.io/

https://shopify.github.io/draggable/ looks neat

I was wanting to implement elements of the library from Shopify and was wondering the process of implementing into my code. I am using visual studios. For instance I wished to use this in my code.

GitHub