拖拽排序react-beautiful-dnd+antd-mobile的List最小实现

拖拽排序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”,