react-smooth-dnd - react wrapper components for smooth-dnd

•    Javascript

---

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.

react drag-and-drop draggable dragndrop sortable reactjs drag drop drag-drop drag&drop dnd

react-dnd - Drag and Drop for React

•    TypeScript

---

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

react drag-and-drop reactjs file drag drop html5 draggable droppable dnd react-component hoc

react-dnd-touch-backend - Touch Backend for react-dnd

•    Javascript

---

Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation.We might try to build it directly in the Backend itself in the future to compensate for this limitation.

react drag drop touch react-dnd

vddl - 🦄 Vue components for modifying lists with the HTML5 drag & drop API.

•    Vue

---

Vue components for modifying lists with the HTML5 drag & drop API. Touch devices are not supported, because they do not implement the HTML5 drag & drop standard. However, you can use a shim to make it work on touch devices as well.

vue-dnd dnd drag-and-drop vue vue-components

drag-drop - HTML5 drag & drop for humans

•    Javascript

---

In case you didn't know, the HTML5 drag and drop API is a total disaster! This is an attempt to make the API usable by mere mortals.This module works in the browser with browserify.

html5 drag-drop drag-and-drop browserify browser drag drop dnd drag-&-drop frontend

vue-dragging - A sortable list directive with Vue

•    Javascript

---

Makes your elements draggable in Vue. group is unique key of dragable list.

vue vue-dragging vue-drag vue-dnd draggable drag drop html5 droppable drag-and-drop dnd

vue-drag-and-drop-list - 🐴 Vue directives for modifying lists with the HTML5 drag & drop API.

•    Javascript

---

Vue directives that allow you to build sortable lists with the native HTML5 drag & drop API. Supports nested lists for building trees and other fancy structures. In general, in 2.0 directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using Components as the main code-reuse abstraction.

vue html5-drag drag-and-drop-list dnd

ng2-dnd - Angular 2 Drag-and-Drop without dependencies

•    TypeScript

---

Angular 2 Drag-and-Drop without dependencies. Follow me to be notified about new releases.

angular angular2 angular4 drag-and-drop drag drop dropzone angular-2

react-native-sortable-listview - Drag drop capable wrapper of ListView for React Native

•    Javascript

---

Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging. See example.

react-component ios android react-native drag drop touch listview list sort

react-planner - :pencil2: A React Component for plans design

•    Javascript

---

react-planner is a React component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.

component interface react react-component reactjs ui webgl threejs svg floorplans draw floorplanner plan 3d home-design interior-design react.js

schema-plugin-flow - A highly extensible JavaScript library, abbreviated as Sifo

•    Javascript

---

schema-plugin-flow, abbreviated as Sifo ([sɪfɔ])，is a highly extensible JavaScript library. This library allows developers to extend business logic and page layout without touching source code, when the source code is written in Sifo.

react plugin schema vue drag-and-drop form extensible ant-design js-framework low-code vue-drag-and-drop react-drag-and-drop ant-design-vue sifo schema-render extend-plugins schema-plugin-flow

Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices

•    Javascript

---

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. You can use any element for the list and its elements, not just ul/li. Here is an example with divs.

drag sortable reordering sort drag-and-drop drag-drop ui draggable droppable reorder meteor angular ng-sortable react mixin

react-sortable - A sortable list component built with React

•    Javascript

---

Higher-order component for creating sortable lists with minimalistic implementation and without polyfills. Using just React.js and HTML5 DragEvent interface. Mainly tested in latest stable Webkit, Firefox and IE.

react sortable sorting drag drop dragndrop draganddrop

ngDraggable - Drag and drop module for Angular JS

•    Javascript

---

Drag and drop module for Angular JS with support for touch devices. demo. ng-drag-start and ng-drag-move is also available. Add to the ng-drop element. ng-drag-stop can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

•    Javascript

---

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

react reactjs reactjs-components react-component react-components

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

•    Javascript

---

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

react grid drag-and-drop resize es2015 drag draggable resizable fluid responsive

Fullcalendar - Full-sized drag & drop event calendar

•    Javascript

---

FullCalendar is a full-sized drag & drop event calendar. It generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine. It has support for React, Vue, Angular and Javascript.

calendar event full-sized jquery-plugin javascript-library google-calendar ui-library ui-components react

lightGallery - A customizable, modular, responsive, lightbox gallery plugin

•    Javascript

---

lightGallery is a customizable, modular, responsive, lightbox gallery plugin. No dependencies. Available for React.js, Angular, Vue.js, and typescript.

react youtube vimeo angular video vue thumbnails image-gallery css-animations lightbox html5-video lightbox-gallery-plugin video-gallery react-gallery angular-gallery lit-element vue-gallery

react-tags - A fantastically simple tagging component for your React projects

•    Javascript

---

React-tags is a simple tagging component ready to drop in your React projects. The component is inspired by GMail's To field in the compose window. Because I was looking for an excuse to build a standalone component and publish it in the wild? To be honest, I needed a tagging component that provided the above features for my React-Surveyman project. Since I was unable to find one which met my requirements (and the fact that I generally enjoy re-inventing the wheel) this is what I came up with.

react react-tags autocomplete dragdrop drag-drop tags tag-input react-component autosuggest

Mantine - A fully featured React components library includes more than 120 customizable components and hooks

•    Typescript

---

Mantine is a fully featured React components library includes more than 120 customizable components and 40+ hooks to manage state and UI management. Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

react-components react-library react hooks typescript accessibility uikit a11y design-system