Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dreamqyq/antd-upload-dnd

Last synced: 8 days ago
JSON representation

Host: GitHub
URL: https://github.com/dreamqyq/antd-upload-dnd
Owner: dreamqyq
Created: 2020-07-14T02:36:35.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-06T11:25:43.000Z (almost 2 years ago)
Last Synced: 2024-10-31T19:42:01.707Z (15 days ago)
Language: TypeScript
Size: 2.53 MB
Stars: 37
Watchers: 3
Forks: 10
Open Issues: 5
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## 简介
图片上传，图片墙实现可拖拽排序效果。
- 基于 `react-beautiful-dnd` 实现的版本，可实现图片在同一行的拖拽排序效果，但是如果图片过多导致换行，该版本的效果就不尽如人意。
- 基于 `react-sortable-hoc` 实现的版本，可实现图片多行展示的拖拽排序效果，但是在具体细节方面的效果不如 `react-beautiful-dnd`。

## 相关博客
https://www.jianshu.com/p/29cfa830d478

## 预览
- `react-beautiful-dnd`

![预览](https://i.loli.net/2020/07/16/sFeBCEScNxJQ47w.gif)
- `react-sortable-hoc`

![预览](./final.gif)

## 技术栈
- 图片上传组件基于 [ant-design](https://github.com/ant-design/ant-design) 的 upload 组件。
- 图片拖拽排序效果基于 [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) 或 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)