javascript - 我如何创建一个 Javascript/Jquery 算法函数，它将在加载时进行计算——并在 mousedrag 期间重新绘制？

Question

我已经开始开发网络应用程序，现在我正在解决一些最初的前端障碍。我将首先向您提供有关前端的一些详细信息，以确保我的问题的上下文清楚。

**下图显示了与问题相关的不同元素。*

每个Node是可拖动的。如果愿意，请快速查看 http://labs.inversepenguin.com查看测试 canvas与一个node活跃。

图表注释:

Node 2的位置在图 2 中已从其在图 1 中的位置发生变化，导致额外的 link正在显示。我的目标是让新创建的 link瞬间出现node2已被拖到必要的距离......而不是说，在用户掉落之后 node2 .

---

"How can I create a Javascript/Jquery algorithmic function that will calculate on load--and re-draw during mousedrag?"

---

所需的功能包括:

• 一种分析距离的算法在 nodes 之间确定多少 links应该显示。

• 创建/销毁 links基于结果。

• 定位每个结果 link适本地；居中且均匀间隔开。

我对自己处理函数执行的几何和数学能力很有信心——但我不确定如何在鼠标拖动期间让函数“监听”和“重新绘制”。

---

我可能在想也许在结束时让函数调用自己，在 if 之后检查用户是否“仍在拖拽”，但我是编程新手，并没有牢牢掌握什么是实用的。

在此先感谢您的帮助!

Answer 1

如果你仍然想使用 jQuery，我建议使用 draggable-functionality of jQuery UI .它使您可以轻松地使元素可拖动，还允许您将自定义函数绑定(bind)到 drag 事件。每当用户在拖动元素时移动鼠标时都会调用此函数，因此它可用于更新“链接”。

当然，您也可以将相同的函数绑定(bind)到页面的加载事件以创建初始“链接”。