Tech Stack Collection Share Vol.8

12 Drag and Drop Libraries for JS、Vue、React

When you interact with your website or web application, the user experience is critical. Drag-and-drop components enhance the user experience by making complex operations simple with a single drag-and-drop.

---

For JavaScript

1、Sortable.js[1]

2、Dropzone[2]

3、interact.js[3]

4、draggable[4]

For React

5、react-beautiful-dnd[5]

6、react-dnd[6]

7、dnd kit[7]

8、react-draggable[8]

For Vue

9、Vue.Draggable[9]

10、vue-grid-layout[10]

11、vue-drag-resize[11]

12、neodrag[12]

References

[1]Sortable.js: https://github.com/SortableJS/Sortable

[2]Dropzone: https://github.com/dropzone/dropzone

[3]interact.js: https://github.com/taye/interact.js

[4]draggable: https://github.com/Shopify/draggable

[5]react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd

[6]react-dnd: https://github.com/react-dnd/react-dnd

[7]dnd kit: https://github.com/clauderic/dnd-kit

[8]react-draggable: https://github.com/react-grid-layout/react-draggable

[9]Vue.Draggable: https://github.com/SortableJS/Vue.Draggable

[10]vue-grid-layout: https://github.com/jbaysolutions/vue-grid-layout

[11]vue-drag-resize: https://github.com/kirillmurashov/vue-drag-resize

[12]neodrag: https://github.com/PuruVJ/neodrag

[13]tech-stack.tools: https://tech-stack.tools/

- END -