拖拽排序react-beautiful-dnd+antd-mobile的List最小实现
import {
useState } from 'react'
import {
DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import {
List } from 'antd-mobile'
// 生成一些用于拖拽的条目
const getItems = (count) =>
Array.from({
length: count }, (v, k) => k).map((k) => ({
id: `item-${
k}`,
content: `item ${
k}`,
}))
// 重新排序
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list)
const [removed] = result.splice(startIndex, 1)
result.splice(endIndex, 0, removed)
return result
}
export default () => {
const [items, setItems] = useState(getItems(6))
// 拖拽完放下时
const onDragEnd = (result) => {
if (!result.destination) return
const newItems = reorder(
items,
result.source.index,
result.destination.index
)
setItems(newItems)
}
return <div className='m-dragOrder'>
<h3>react-beautiful-dnd拖拽排序</h3>
{
/* 根容器 */}
<DragDropContext onDragEnd={
onDragEnd}>
{
/* 可放置的容器 */}
<Droppable droppableId="droppable">
{
(provided, snapshot) => (
<div {
...provided.droppableProps} ref={
provided.innerRef}>
<List>
{
items.map((item, index) => (
// 可拖动的条目
<Draggable key={
item.id} draggableId={
item.id} index={
index}>
{
(provided, snapshot) => (
<div ref={
provided.innerRef} {
...provided.draggableProps} {
...provided.dragHandleProps}>
<List.Item>
<span style={
{
color: snapshot.isDragging ? 'red' : '' }}>{
item.content}</span>
</List.Item>
</div>
)}
</Draggable>
))}
{
provided.placeholder}
</List>
</div>
)}
</Droppable>
</DragDropContext>
</div>
}
相关版本
“antd-mobile”: “^5.24.0”,
“react”: “^18.2.0”,
“react-beautiful-dnd”: “^13.1.1”,