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

我已经开始在Web应用程序上进行开发,而现在我正解决一些最初的前端障碍.首先,我将为您提供一些有关前端的详细信息,以确保我的问题的上下文清晰.

**下面是一个图表,显示了与问题相关的不同元素.*

每个节点都是可拖动的.如果愿意,请快速浏览一下http://labs.inversepenguin.com,以查看处于活动状态的一个节点的测试画布.

图表说明：

图2中节点2的位置已从图1中的位置改变了,从而显示了额外的链接.我的目标是让新创建的链接在node2被拖动必要的距离后立即出现……与之相反,在用户放下node2之后.

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

所需功能包括：

>一种分析距离的算法
节点之间确定多少
链接应显示.
>根据结果创建/销毁链接.
>适当定位每个结果链接；居中且均匀
隔开.

我对处理函数的几何形状和数学能力很有信心-但我不确定如何在鼠标拖动过程中使函数“侦听”和“重绘”.

我可能在想,也许是在检查用户是否“仍在拖动”之后,在函数的结尾处调用自身,但是我对编程并不陌生,对实际操作还没有把握.

在此先感谢您的帮助！

解决方法:

如果使用Jquery UI进行拖动,则可以定义开始,拖动或停止事件以执行适当的工作.

$( ".selector" ).bind( "dragstart", function(event, ui) {
  ...
});

$( ".selector" ).bind( "drag", function(event, ui) {
  ...
});

$( ".selector" ).bind( "dragstop", function(event, ui) {
  ...
});

我看到的挑战是每个节点将必须知道连接到它的对象.我之前通过创建自己的属性来完成此操作.使用上面的2节点解决方案：

<div id="node1" child="node2" />
<div id="node2" parent="node1" />

如果您有链接到多个其他节点的节点,则可以执行以下操作

<div id="node1" children="node2;node3;node4" />

有一个定界的孩子名单.然后,检索这些信息进行处理就很简单,就像var children = $(this).attr(‘children’).split(‘;’);这将为您提供儿童ID的数组.您还可以获取元素和子元素的位置,计算距离并修改链接.

标签：frontend,web-applications,javascript,jquery
来源： https://codeday.me/bug/20191208/2093994.html