Top 23 Drag and Drop Open-Source Projects
-
For Drag and Drop I used the component library beautiful-dnd. I was sold on the fact that it gives me the exact functionality I needed and it's headless. The library gives us three main elements
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Project mention: Could somebody recommend a library to achieve this? | reddit.com/r/webdev | 2022-07-13 -
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: Best way to update element position (drag & drop) | reddit.com/r/reactjs | 2022-01-26
You can take a look at how others like dragular implemented the drag & drop function .. https://github.com/bevacqua/dragula
-
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.
-
Project mention: VueJS animation when moving rendered items from an array | reddit.com/r/vuejs | 2022-03-31
U might search for something like this https://github.com/SortableJS/Vue.Draggable
-
dropzone
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
Project mention: Self-hosted alternative to Google Forms with the ability to upload files in the form | reddit.com/r/selfhosted | 2022-06-16Or roll your own and use something like DropZone.
-
Project mention: Ask HN: What's is your go to toolset for simple front end development? | news.ycombinator.com | 2022-07-07
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
GrapesJS
Free and Open source Web Builder Framework. Next generation tool for building templates without coding
Project mention: Are there any .net/JS HTML drag and drop builders available for licensing? | reddit.com/r/dotnet | 2022-07-13It's not a backend solution, but have you looked into GrapesJS? https://grapesjs.com/
-
Project mention: 25 React component libraries you just might need for your next project! | dev.to | 2022-05-31
react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React.
-
Just two example libraries: FilePond, DropZone
-
interact.js
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Project mention: I am currently making a Windows 11-themed personal website and planning to add easter eggs. What do you guys think? | reddit.com/r/web_design | 2022-08-04I used interact js for dragging and dropping. Everything else is CSS HTML and simple JavaScript.
-
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Project mention: I am creating a form builder using React DnD but having some issues. | reddit.com/r/reactjs | 2022-07-21I suggest using this library for DnD.
-
Project mention: Murri: Infinite responsive, sortable, filterable and draggable layouts | news.ycombinator.com | 2022-04-12
-
Project mention: Writing HTML sucks and No-code doesn't help | reddit.com/r/programming | 2022-05-09
What problems do you have with all the existing options (just a couple links I picked from a google search)?
-
I use react-dropzone (~2M weekly downloads) and react-smooth-dnd (22K weekly)
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Project mention: Lambda keeps consuming more and more memory until it kills it self | reddit.com/r/aws | 2022-08-09Next I tried with pure Konva (we use a modified version), because I found this: https://github.com/konvajs/konva/issues/1247
-
The first chapter will explain how we can create draggable elements, is a great existing package called react-draggable, This package is powerful that can provide draggable elements using JavaScript.
-
I'm looking at trying to create a floorplan editor in vue and I was wondering if there are any packages that can help, I've been looking at the vue grid layout package, but I think that might be quite difficult to implement how I want it to. I've not really got the time to create it myself, as this will only be a small section of a larger project.
-
Project mention: Using tree data structures to implement terminal split panes | news.ycombinator.com | 2022-01-30
DomTerm (https://domterm.org) uses the Golden Layout library (https://github.com/golden-layout/golden-layout). As far as I can tell, this does everything mentioned in the article. It also supports tabs, and you can also reposition terminal windows by dragging, neither of which I saw mentioned in the article. (I'm currently working on being able to drag between top-level windows. It sort-of-works, but only at the proof-of-concept level.)
-
android-advancedrecyclerview
RecyclerView extension library which provides advanced features. (ex. Google's Inbox app like swiping, Play Music app like drag and drop sorting)
-
dnd-kit
The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
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.
-
Project mention: I'm making a No-code website builder, using React. Need Advice on architecture and implementation of my idea. | reddit.com/r/reactjs | 2022-07-29
-
Project mention: Faster than Tkinter or QtPy: Drag and drop frontends for your Python projects | reddit.com/r/Python | 2022-07-22
(Source code for drag and drop builder.)
Drag and Drop related posts
- I am currently making a Windows 11-themed personal website and planning to add easter eggs. What do you guys think?
- Building Training Plan builder: DnD & Autocomplete
- I'm making a No-code website builder, using React. Need Advice on architecture and implementation of my idea.
- I am creating a form builder using React DnD but having some issues.
- Creating an app using Drag and Drop with React without libraries 👆!
- ¡Creando un app que usa Drag and Drop con React sin librerías 👆!
- How can I run a script with clipboard as the only parameter?
Index
What are some of the best open-source Drag and Drop projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | react-beautiful-dnd | 27,655 |
| 2 | sortablejs | 25,335 |
| 3 | Dragula | 21,271 |
| 4 | react-dnd | 18,024 |
| 5 | Vue.Draggable | 17,731 |
| 6 | dropzone | 16,747 |
| 7 | draggable | 16,235 |
| 8 | GrapesJS | 16,231 |
| 9 | react-grid-layout | 16,158 |
| 10 | filepond | 12,697 |
| 11 | interact.js | 11,047 |
| 12 | react-sortable-hoc | 10,139 |
| 13 | muuri | 10,022 |
| 14 | flowy | 9,428 |
| 15 | react-dropzone | 9,127 |
| 16 | Konva | 7,873 |
| 17 | react-draggable | 7,782 |
| 18 | vue-grid-layout | 5,717 |
| 19 | golden-layout | 5,629 |
| 20 | android-advancedrecyclerview | 5,226 |
| 21 | dnd-kit | 5,117 |
| 22 | craft.js | 5,112 |
| 23 | VvvebJs | 5,004 |
Are you hiring? Post a new remote job listing for free.
