Javascript 使用react dnd将鼠标拖放到形状的边缘？

我需要的想法，以发展拖放箭头在一个几何形状的边缘，如一个矩形，圆形等，在一个反应项目，使用反应dnd显示北方向。另一方面，我应该保存箭头的位置，以便在同一位置再次显示它。有什么想法吗

---

是的，您必须将坐标保存在您所在州的某个地方。然后使用

useDrop

hook（）将箭头的新坐标推到新位置时的状态

综上所述，过程如下：

• 将状态中的坐标初始化为箭头所在的位置
• 使用

  useDrag

  • 传递到

    useDrag

    a

    begin

    callback-该回调修改您的状态-每当开始拖动箭头时将调用该回调
  • 对

    end

    回调执行相同的操作
  • 然后它将被设置动画，您可以拖动它，它将跟随，您甚至可以根据您在

    开始

    和

    结束

    功能中设置的状态项更改其外观
• 使用

  useDrop

  • 对于

    useDrag

    ，传递

    drop

    功能以按下以说明箭头的新坐标

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

---

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

谢谢@bonjour123让你感兴趣，但我的主要问题是只让形状的线条可以拖放。你在这里解释过了吗？你是说你只想让它粘在绳子上（掉下来的时候）？如果是这样，您只需要在drop函数中检查当前位置是否在一条线上。如果是，则将新位置设置为state，否则，放弃，什么也不做。是的，我的意思是。丢弃不利于用户体验。拖动不应该在直线外工作。嗯，我想你可以计算直线上最近的坐标，并将其置于canDrag函数内的状态。但老实说，使用普通的vanilla js，它会更快、更有效地编写代码，同时对您来说也更容易。在mouseUp上，更新您的状态以保持新的位置，这就是我建议您使用本文中的代码并进行所需的小修改。