react-dnd - Drag and Drop for React

  •        47

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

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

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


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.

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

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.

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.

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.

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-fine-uploader - Easily integrate Fine Uploader or Fine Uploader S3 into a React app

  •    Javascript

Makes using Fine Uploader in a React app simple. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI. These allow you to easily build a highly customizable and powerful UI for your upload widget, backed by Fine Uploader's core feature set. Most of these components are unstyled (i.e. ready to be styled by you). Focused component-specific stylesheets may be provided at a later date.

react-rnd - 🖱 A resizable and draggable component for React.

  •    TypeScript

A resizable and draggable component for React. The width and height property is used to set the default size of the component. For example, you can set 300, '300px', 50%. If omitted, set 'auto'.

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.

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

  •    Javascript

Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. Draggable comes with additional modules: Sortable, Droppable, Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.The additional modules are built on top of Draggable and therefore provide a similar API interface, for more information read the documentation below.

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.

dazzle - :rocket: Dashboards made easy in React JS.

  •    Javascript

Dazzle is a library for building dashboards with React JS. Dazzle does not depend on any front-end libraries but it makes it easier to integrate with them.Dazzle's goal is to be flexible and simple. Even though there are some UI components readily available out of the box, you have the complete control to override them as you wish with your own styles and layout.