react-beautiful-dnd - Beautiful, accessible drag and drop for lists with React.js

  •        1325

Beautiful, accessible drag and drop for lists with React.js

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

Dependencies:

babel-runtime : 6.26.0
invariant : 2.2.2
memoize-one : 3.0.1
prop-types : 15.5.10
prop-types-extra : 1.0.1
raf-schd : 2.0.1
react-motion : 0.5.0
react-redux : 5.0.6
redux : ^3.6.0
redux-thunk : 2.2.0
reselect : 3.0.1

Tags
Implementation
License
Platform

   




Related Projects

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

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.

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.


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.

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.

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

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.

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.

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.

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

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.

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.

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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.