react-beautiful-dnd拖拽列表排序

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

// 拖拽结束回调
    onDragEnd = (result) => {
        const { source, destination, draggableId } = result;
        if (!destination) {
            return;
        }
        ...
    };

 <DragDropContext onDragEnd={this.onDragEnd}>
  <Droppable droppableId="droppableId">
    {(provided, snapshot) => (
      <div ref={provided.innerRef} {...provided.droppableProps}>
        list.map((item, index) => {
            return (
                <Draggable
                    draggableId={`${item.sort}`}
                    index={index}
                    key={item.sort}
                >
                    {(provided, snapshot) => (
                        <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}

                        >
                            {/* 拖拽图标 */}
                            <div
                                key={index}
                                {...provided.dragHandleProps}
                            />
                            <div>内容内容</div>
                        </div>
                    )}
                </Draggable>
            );
        })
        {provided.placeholder}
      </div>
    )}
  </Droppable>
</DragDropContext>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容