JavaScript Drag and Drop

Open-source JavaScript projects categorized as Drag and Drop

Top 23 JavaScript Drag and Drop Projects

  • react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Project mention: Free tools for frontend | dev.to | 2023-10-01

    Drag-and-drop library for React with beautiful animations. Website - GitHub

  • sortablejs

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

    Project mention: Show HN: An open source visual editor for React | news.ycombinator.com | 2023-09-05

    Well, there are obvious leading contenders like `https://sortablejs.github.io/Sortable/` and, within the `vue` space, `https://sortablejs.github.io/vue.draggable.next/`. Most of the stuff I looked at was unmaintained (lots not updated for vue3).

    I really disliked the vuedraggable was handling nesting, and it's just a wrapper around a sortable. At the end of the day, my problem was simple enough that I didn't want a 500kb dependency. If you're wanting to do something like the OP but with nesting, I'd definitely start by looking at Sortable, though (maybe wrapping it the way you want).

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

  • Dragula

    :ok_hand: Drag and drop so simple it hurts

    Project mention: Made a free website for practicing what's taught in Tobira: Gateway to Advanced Japanese | /r/LearnJapanese | 2022-12-16

    Yup, I wrote the majority of the site's functionality using vanilla JS. I did use dragula for the drag and drop and easytimer for the timing though.

  • Vue.Draggable

    Vue drag-and-drop component based on Sortable.js

    Project mention: How to use Nodemailer with Cypress 10? | /r/Cypress | 2022-12-07
  • react-grid-layout

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

    Project mention: Casca.Space: a Chrome extension for your focus and productivity | /r/startpages | 2023-06-06

    This is react-grid-layout with some custom logic https://github.com/react-grid-layout/react-grid-layout

  • dropzone

    Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

  • draggable

    The JavaScript Drag & Drop library your grandparents warned you about.

    Project mention: Shopify's Draggable Landing Page Is Beautiful | news.ycombinator.com | 2023-08-17

    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...

  • Revelo Payroll

    Free Global Payroll designed for tech teams. Building a great tech team takes more than a paycheck. Zero payroll costs, get AI-driven insights to retain best talent, and delight them with amazing local benefits. 100% free and compliant.

  • filepond

    🌊 A flexible and fun JavaScript file upload library

    Project mention: Can anyone suggest PHP, JavaScript File Manager tool with Crop tool integrated? | /r/PHP | 2023-05-22

    Have a look at https://pqina.nl/filepond/

  • flowy

    The minimal javascript library to create flowcharts ✨

    Project mention: Flowy: A JavaScript library to create pretty flowcharts with ease | news.ycombinator.com | 2022-12-04
  • react-sortable-hoc

    A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

  • muuri

    Infinite responsive, sortable, filterable and draggable layouts

    Project mention: Does anyone know of any new, maintained Drag-n-Drop solutions for vue3? | /r/vuejs | 2022-10-21

    We’ve gone through a lot of different choices, all with different pros n cons. And we landed to use https://github.com/haltu/muuri Which is veeery well written, though has it’s own source of truth coming from the DOM, which makes it a bit trickier to pair up with vue in certain reactivity cases. It’s mainly for creating a draggable dashboard layout.

  • react-dropzone

    Simple HTML5 drag-drop zone with React.js.

    Project mention: Uploading Images in React | dev.to | 2023-09-30

    In addition to being able to access the file browser to select an image to upload, I also wanted to be able to drag'n'drop that image as well. While researching a few options, I came across react-dropzone, a "Simple React hook to create a HTML5-compliant drag'n'drop zone for files." Installation was easy, and the docs were well-written with many examples of different applications.

  • react-draggable

    React draggable component

    Project mention: nize.pics – create beautiful images of code and screenshots | /r/webdev | 2022-11-12

    Thanks! It's built with React (Next.js) and Mantine for the UI components. I'm not sure what you mean with edit systems, but the layers are using react-draggable. The syntax highlighting is powered by shiki and a bunch of exported VS Code themes. The state is handled by zustand, with the undo-redo functionality built on top of it. The code formatting is done with prettier and the image export uses html-to-image.

  • vue-grid-layout

    A draggable and resizable grid layout, for Vue.js.

  • golden-layout

    A multi window layout manager for webapps

  • VvvebJs

    Drag and drop website builder javascript library.

    Project mention: [AskJS] What dnd website builder so you recommend? | /r/javascript | 2022-11-25
  • react-sortable-tree

    Drag-and-drop sortable component for nested data and hierarchies

  • Microweber

    Drag and Drop Website Builder and CMS with E-commerce

    Project mention: Docker for Website? | /r/selfhosted | 2023-04-17

    MicroWeber Github: https://github.com/microweber/microweber

  • fancytree

    JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

    Project mention: Fancytree – a JavaScript tree view / tree grid plugin | news.ycombinator.com | 2023-08-19
  • vue-smooth-dnd

    Vue wrapper components for smooth-dnd

    Project mention: [Vue Js] Comment avoir un conteneur vide avec Vue-Sooth-DND? | /r/enfrancais | 2023-05-07
  • react-dragula

    :ok_hand: Drag and drop so simple it hurts

  • react-uploady

    Modern file uploading - components & hooks for React

  • react-native-drag-sort

    🔥🔥🔥Drag and drop sort control for react-native

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-10-01.

JavaScript Drag and Drop related posts

Index

What are some of the best open-source Drag and Drop projects in JavaScript? This list will help you:

Project Stars
1 react-beautiful-dnd 30,967
2 sortablejs 27,480
3 Dragula 21,650
4 Vue.Draggable 19,202
5 react-grid-layout 18,354
6 dropzone 17,525
7 draggable 17,071
8 filepond 14,094
9 flowy 10,627
10 react-sortable-hoc 10,547
11 muuri 10,532
12 react-dropzone 9,913
13 react-draggable 8,476
14 vue-grid-layout 6,604
15 golden-layout 5,985
16 VvvebJs 5,984
17 react-sortable-tree 4,806
18 Microweber 2,809
19 fancytree 2,727
20 vue-smooth-dnd 1,625
21 react-dragula 987
22 react-uploady 897
23 react-native-drag-sort 671
Collect and Analyze Billions of Data Points in Real Time
Manage all types of time series data in a single, purpose-built database. Run at any scale in any environment in the cloud, on-premises, or at the edge.
www.influxdata.com