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

【问题标题】：Drag Drop On The Edge Of A Shape With react-dnd?使用react-dnd在形状边缘拖放？
【发布时间】：2019-12-11 20:30:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

总结一下，流程如下：

将您的坐标初始化到您希望箭头所在的位置
使用useDrag 使您的箭头组件可拖动
- 传递给 useDrag 一个 begin 回调 - 修改您的状态 - 将在箭头开始被拖动时调用
- 对end 回调执行相同操作
- 然后它将被动画化，您将能够拖动它，它会跟随，您甚至可以根据您在 begin 和 end 函数中设置的状态项更改其外观
使用 useDrop 使您的箭头组件可放置
- 至于useDrag，传递一个drop函数push来表示新的箭头坐标。

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

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

【讨论】：

感谢@bonjour123 对您的关注，但我的主要问题是仅使形状的线条可拖放。你在这里解释了吗？
你的意思是你希望它只粘在线上（当掉落时）？如果是这样，您只需要检查当前位置是否超过一条线即可。如果是，则将新位置设置为状态，否则，丢弃并且什么都不做。
是的，我是这个意思。丢弃不利于用户体验。拖动不应该在行外工作。
好吧，我猜你可以计算出直线上最近的坐标，并将其置于 canDrag 函数中的状态。但老实说，用普通的 js 来做，它会更快、更有效的代码，同时对你来说也容易得多。在 mouseUp 上，更新您的状态以保持新位置，仅此而已
我建议您使用answer 中的代码并进行一些必要的修改。