在react上弹出漂亮的dnd时跳转的项目

npm install react-beautiful-dnd

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

<DragDropContext>
  <Droppable droppableId="droppable">
    {(provided) => (
      <div ref={provided.innerRef} {...provided.droppableProps}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided) => (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                {item.content}
              </div>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </div>
    )}
  </Droppable>
</DragDropContext>

<DragDropContext onDragEnd={handleDragEnd}>
  {/* ... */}
</DragDropContext>

// 处理拖拽结束的回调函数
const handleDragEnd = (result) => {
  if (!result.destination) {
    return;
  }

  // 获取拖拽元素的起始位置和目标位置
  const sourceIndex = result.source.index;
  const destinationIndex = result.destination.index;

  // 执行相应的操作，比如跳转到新的页面
  if (sourceIndex !== destinationIndex) {
    // 执行跳转操作
    // window.location.href = '新页面的URL';
  }
};