我已经开始在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的数组.您还可以获取元素和子元素的位置,计算距离并修改链接.