javascript - 使用react-dnd在形状边缘拖放？

Question

在使用 react-dnd 显示北向的 React 项目中，我需要一些想法来开发在几何形状（如矩形、圆形等）的边缘上拖放箭头。另一方面，我应该保存箭头的位置以在同一个地方再次显示它。有任何想法吗？

标签： javascriptreactjsdrag-and-dropreact-dnd

Answer 1

是的，您必须将坐标保存在您所在州的某处。然后使用useDrop钩子 ( doc ) 将箭头的新坐标推送到您的状态，当它被放到一个新位置时。

总结一下，流程如下：

• 将您的坐标初始化到您希望箭头所在的位置
• 使您的箭头组件可拖动使用useDrag
  • 传递给useDrag一个begin回调 - 修改你的状态 - 每当箭头开始被拖动时都会调用它
  • end对回调做同样的事情
  • 然后它将是动画的，你将能够拖动它，它会跟随，你甚至可以根据你在你的begin和end函数中设置的状态项来改变它的外观

• 使用使您的箭头组件可放置useDrop

  • 至于useDrag，传递一个drop函数来 push 来说明箭头的新坐标。

由于您不提供任何代码，因此很难为您提供更多帮助。如果原因是您不知道从哪里开始，请查看这个惊人的分步教程。

但是，请记住，所有这些都会触发大量重新渲染。就个人而言，对于这个王者，我喜欢避免使用第三方库，以控制性能，并倾向于尽可能接近 dom（例如，使用 js 事件而不是在拖动时不断更新状态）。