electron+react 拖动div节点实现跨屏拖动

在 Electron 和 React 中实现跨屏拖动 Div 节点通常涉及到 HTML5 的 Drag and Drop API，以及一些库如 react-dnd 或 react-beautiful-dnd 的支持。以下是基本步骤：

1. **安装依赖**:
首先需要安装相关的库，比如 `react-dnd` 和 `react-dnd-html5-backend`：

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

2. **设置组件状态**:
创建一个状态来存储当前拖动的 div 元素的位置信息。

3. **创建 Draggable 组件**:
使用 `Draggable` 组件从 react-dnd 库，并提供必要的 props，如 item 的描述、开始拖动的回调等。例如：

   import { useDrag } from 'react-dnd';

   function draggableDiv({ children }) {
     const [{ isDragging }, drag] = useDrag({
       item: { type: 'div', id: children.props.id },
       collect: (monitor) => ({
         isDragging: monitor.isDragging(),
      }),
      start: (event) => {
        // 开始拖动时的处理
      },
      end: (event) => {
        // 结束拖动时的处理
      },
    });

    return (
      <div ref={drag} style={{ ...children.props.style, cursor: isDragging ? 'move' : '' }}>
        {isDragging ? <div>正在拖动</div> : children}
      </div>
    );
   }

4. **添加 Droppable 区域**:
创建一个接受并处理拖放事件的 Droppable 组件，它会监听 drop 事件，并更新状态。

5. **应用样式和限制**:
为了实现在屏幕上跨区域拖动，你可能需要对拖动元素和放置区域施加一些样式规则，如禁止原生滚动和设置边界限制。

6. **渲染和管理状态**:
在 React 组件中，将 Draggable 和 Droppable 组件组合起来，并在状态变更时重新渲染它们。

function App() {
  // 状态管理
  const [dragItemPosition, setDragItemPosition] = useState(null);

  return (
    <div>
      {/* 创建 Draggables */}
      <draggableDiv key="div1" id="div1" position={dragItemPosition}>
        <div>Drag me</div>
      </draggableDiv>

      {/* 创建 Droppables */}
      <droppableArea onDrop={(item) => setDragItemPosition(item.position)}>
        <div>Drop here</div>
      </droppableArea>
    </div>
  );
}

export default App;