用react实现这个

在React中实现拖放功能和节点间的跳转链接，可以使用`react-dnd`和`react-beautiful-dnd`这两个流行库来处理拖拽功能，对于简单的链接跳转，可以直接利用`onClick`事件。

首先安装必要的依赖：

npm install react-dnd react-dnd-html5-backend react-beautiful-dnd

然后编写基本组件：

import React, { useCallback, useState } from 'react';
import { useDrag, DropTarget } from 'react-draggable';
import { DragDropContext } from 'react-beautiful-dnd';

const Node = ({ link, id, ...rest }) => (
  <div {...rest} onClick={() => window.location.href = link}>
    <span>{id}</span>
  </div>
);

const collect = monitor => ({
  isDragging: monitor.isDragging(),
  draggingIndex: monitor.getSource().getIndex(monitor.getItem()),
});

const DraggedNode = DragDropContext(
  useDrag(collect),
)(Node);

const DraggableList = () => {
  const [nodes, setNodes] = useState([{ id: '1', link: '#' + 'target1' }]);
  
  // 用`useEffect`监听节点变化，更新状态
  useEffect(() => {
    if (collect.isDragging) {
      const newNodes = [...nodes];
      const draggedItem = nodes[collect.draggingIndex];
      newNodes.splice(collect.draggingIndex, 1);
      newNodes.unshift(draggedItem);
      setNodes(newNodes);
    }
  }, [collect]);

  return (
    <ul>
      {nodes.map((node, index) => (
        <DraggedNode key={index} {...node} />
      ))}
    </ul>
  );
};

export default DraggableList;

这里我们创建了一个`DraggableList`组件，节点项是可拖动的，并且在点击时会跳转到指定链接。`react-dnd`主要用于拖动功能，`react-beautiful-dnd`则提供更高级的拖放管理。