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

Question

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

Answer 1

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

总结一下，流程如下:

• 将坐标初始化为您希望箭头所在的位置
• 使用 useDrag 使箭头组件可拖动
  • 向 useDrag 传递一个 begin 回调 - 修改您的状态 - 每当箭头开始拖动时都会调用该回调
  • 对 end 回调执行相同的操作
  • 然后它将被动画化，您将能够拖动它，它会跟随，您甚至可以根据您在 begin 和 end< 中设置的状态项来更改其外观 函数

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

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

由于您不提供任何代码，因此很难为您提供更多帮助。如果你不知道从哪里开始，请看看这个神奇的step-by-step tutorial .

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