拖放以交换输入字段

Question

我目前正在尝试将桌面应用程序重写为可以在浏览器中运行的应用程序。我（或多或少）知道如何重写大部分功能，但有一个特别是我不确定如何解决。

所以该应用确实有文本字段（数百个）。您可以单击其中任何一个并键入一些数据。到目前为止一切都很好，但接下来是，您可以拖放以相互交换它们（或它们的内容）。

在桌面上拖放是用鼠标右键完成的，但我不确定这对于网络是否可行。我也在查找一些拖放库，但它们似乎都处理更多“静态”元素，如 div、图像等，但从不输入字段（可能是因为它们正在窃取点击事件？）。

这里有人知道如何实现这样的目标吗？也许其他人已经做过类似的事情，或者如果 XYZ 可能会更容易做？理想情况下在 React 中（因为这是我在应用程序的其余部分使用的），但如果它以任何其他方式工作，也许我将能够采用它。

提前感谢您的任何建议。

Answer 1

我使用https://github.com/atlassian/react-beautiful-dnd 主要思想是使用Draggable 和Droppable 组件。此外，可以同时处理单击和拖动事件。但是有点复杂。