React 实现 Pannable 和 Zoomable 元素，其中包含 Draggable 组件

【问题标题】：React Implementation of Pannable and Zoomable element with Draggable Component inside itReact 实现 Pannable 和 Zoomable 元素，其中包含 Draggable 组件
【发布时间】：2020-12-23 03:13:36
【问题描述】：

我正在尝试构建一个反应应用程序，它可以创建一个卡片组件并将它们连接起来，它们还可以平移和缩放屏幕，也可以拖动这些卡片。就像 Figma 或 Adobe XD 中的构建窗口一样。任何人都可以向我建议任何流行且有效的解决方案或软件包。这几天我一直在做一些研究，但我找不到合适的解决方案。

【问题讨论】：

标签： javascript reactjs draggable

【解决方案1】：

您可以使用拖放功能，基本上您需要在拖放事件发生时处理回调（onDragStart，onDragEnd，onDragEnter ...），您从事件参数中获取数据。当某些东西被丢弃时，您会相应地更新状态（从列表中添加/删除项目），并使用地图功能呈现它们。一些示例：https://codesandbox.io/s/reactdrag-and-drop-iq89y?file=/src/components/TaskList.jsx

【讨论】：