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