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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容