When we do requirements, we sometimes encounter drag and drop. For example, WHEN I was working on Insight 2.0, I encountered a need to drag and drop data from left to right.
And you can animate it while you’re dragging,
react-sortable
Initially we used react-sortable
Installation NPM I react-sortable –save
How it is used is very simple, www.npmjs.com/package/rea…
It takes about 10 minutes, but the downside is pretty obvious,
1. His dragging method is fixed, that is, from dragging, he will swap positions with whoever he meets. But if I don’t want such dragging, I want to judge, “Suli, can’t do it” when I finally release the mouse
2. Drag-and-drop is only supported within the list, not across containers
Overhand index: ★★★★★
Scalability: ★
Of course, if you drag exactly the same way he gave you, then no problem. Our needs are at odds with that
1. Instead of swapping elements, we want to insert them.
2 we need to have a slow effect in the process of mouse dragging, the best plug-in can provide, rather than our own writing
react-beautiful-dnd
With beautifu as an ornament, easing is fine. In fact, the plugin does have its own list element easing, but if you look at the API, it only supports pure vertical or
Pure landscape, with line breaks doesn’t work. I tried using line breaks myself and found that the easing effect is very weird. However, apart from the lack of support for special effects, the choice of drag and drop forms is quite free and relatively fixed
Overhand index: ★★★★
Extensibility: ★★★ (special effects can not be expanded at will)
react-dnd
React-beautiful-dnd is an extension based on react-Dnd. DND has a lot of open extension interfaces, you can basically implement all drag-and-drop, but the cost is that it takes some time to get started. It supports decorators and hooks. However, DND plug-in is more users,
I know the big guys are using DND, (ANTD also use DND to achieve table drag) in addition, DND does not support slow, if you want to do slow, please add your own.
We can use absolute layout for all items and manually set the top left. This is the same idea as the square in front of the flush software. We can determine the width and height of the item +transition
Index: ★★★
Scalability: ★★★★★ ★
react-sortable-hoc
Antd is also useful to the plug-in, it is now I use this a few feel the best, to fit the difficulty is not high, extensibility and good, but also bring slow action, but for us this requirement, using the grid layout effect is very good, but in flex + warp effect is not line, suggested to use the plug-in directly, can deal with 90% demand. If you want more freedom, use DND.
Overhand index: ★★★★
★★★★ ★ (4.5 stars)