React drag and drop sort support flex layout and nested.

Overview

react-flex-dnd

React drag and drop sort support flex layout and nested.

example

This package using hooks, note that your React version is above 16.8 :)

Why flex? flex covers most demands, like list vertically or horizontally, if your list can wrap, that's the problem what here to solve. Flex wrap is likely a grid layout, but there is difference.

Flex wrap layout, just like using css property flex wrap. flex-wrap

Grid layout, it uses all spaces to place elements. grid

If your demand is grid layout, I suggest [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout).

Play with react-flex-dnd: https://asweallcan.github.io/react-flex-dnd, the example is pretty simple, only show one level nested, but it can be infinite nested if you want.

Useage

DragDropProvider

Must wrap your app with it, it provides controllers for your draggables and droppables.

rootId?: string

If using React 17, it is required to identify app root el.

ghostId?: string

html id property for ghost element.

onDragEnd

onDragEnd: (params: {
  to: { index: number; droppableId: string };
  from: { index: number; droppableId: string };
  draggableId: string;
}) => void;

Here comes key part, onDragEnd can get sort result after interaction, from shows old place for the dragging item, but for attention, the index in the to is the new index with dragging item removed. Normally when drag end, you remove element first then insert dragging item to the new place.

You might also like...
 Creating an app using Drag and Drop with React without libraries 🤏
Creating an app using Drag and Drop with React without libraries 🤏

Creating an app using Drag and Drop with React without libraries 👆 ! This time, we are going to implement the functionality to do a Drag & Drop with

Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Taskboard with drag'n drop feature. Built w/ React, TypeScript
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

ReactJS drag and drop functionality for mouse and touch devices
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

:ok_hand: Drag and drop so simple it hurts
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

A directive based drag and drop container for solid-js
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

🦋 react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React 16.8 Support both mous

Comments
  • Multi draggable items feature

    Multi draggable items feature

    This PR provides multiple selection of draggable items. Instead of relying on draggableId which on allows to cope for single selection, I created a new variable selectedDraggedIds in the context API to hold all the items selected in different droppableId.

    I've modified the display of ghost components during the drag so that we can visualise all items being dragged.

    https://user-images.githubusercontent.com/3605098/165356985-e7be3e03-a76f-4d94-90fd-3fcf80e3d9c4.mov

    opened by jaybe78 1
Owner
lvshihao
Nothing easy
lvshihao
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.1k Oct 1, 2022
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Oct 4, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Oct 1, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Sep 30, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 5.6k Oct 4, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.3k Sep 28, 2022
Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

null 112 Sep 23, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 41 Sep 14, 2022
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

Forecast 51 Sep 21, 2022
Drag and Drop library for React.

react-tiny-dnd Drag and Drop library for React. Demo Install via npm npm install react-tiny-dnd or yarn add react-tiny-dnd Features Vertical lists Eas

Rafael Hovhannisyan 25 Sep 4, 2022