如何创建一个 Javascript/Jquery 算法函数来计算加载并在 mousedrag 期间重新绘制?
我已经开始开发一个网络应用程序,现在正在解决一些最初的前端障碍。我将首先向您提供一些有关前端的详细信息,只是为了确保我的问题的上下文清晰。
**下图显示了与问题相关的不同元素。*
每个 Node
都是可拖动的。如果您愿意,请快速浏览http://labs.inversepenguin.com 查看测试< code>canvas 且有一个 node
处于活动状态。
图表注释:
节点 2
在图 2 中的位置与图 1 中的位置相比发生了变化,导致显示了额外的链接
。我的目标是让新创建的 link
在 node2
被拖动到必要的距离时出现......而不是说,在用户删除 node2< /代码>。
“如何创建一个 Javascript/Jquery 算法函数来计算加载并在 mousedrag 期间重新绘制?”
所需的函数将包括:
分析距离的算法
节点
之间确定有多少个 应显示链接
。根据结果创建/销毁
链接
。适当地定位每个生成的
链接
;居中且均匀 间隔。
我对自己处理函数执行的几何和数学能力充满信心 - 但我不确定如何使函数在鼠标拖动期间“监听”和“重新绘制”。
我也许在想,在检查用户是否“仍在拖动”之后,函数可以在其末尾调用自身,但我是编程新手,没有牢固的把握关于什么是实用的。
预先感谢您的任何帮助!
I've begun development on a web app, and I'm just now tackling some of the first front-end obstacles. I'll give you some details about the front-end first, just to make sure the context of my question is clear.
**Below is a diagram, showing the different elements relevant to the question.*
Each Node
is draggable. If you would , please take a quick look at http://labs.inversepenguin.com to view a test canvas
with one node
active.
Diagram notes:
Node 2
's position in Figure 2 has changed from it's location in Figure 1, resulting in an extra link
being displayed. My goal is to have the newly created link
appear the instant node2
has been dragged the necessary distance... as opposed to say, after the user drops node2
.
"How can I create a Javascript/Jquery algorithmic function that will calculate on load--and re-draw during mousedrag?"
The desired function would consist of:
An algorithm to analyze the distance
betweennodes
to determine how manylinks
should be displayed.Create/destroy
links
based upon results.To position each resulting
link
appropriately; centered and evenly
spaced.
I'm confident in my geometry and math abilities to handle the execution of the function--but I'm not sure how to make the function "listen" and "re-draw" during mousedrag.
I was maybe thinking maybe having the function call itself at it's end, after an if
checking to see if the user is "still dragging," but I'm new to programming and don't have a firm grasp on what's practical.
Thanks in advance for any help!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您无论如何都想使用 jQuery,我建议您使用 jQuery UI 的可拖动功能。它使您能够轻松地使元素可拖动,还允许您将自定义函数绑定到
drag
事件。每当用户在拖动元素时移动鼠标时就会调用此函数,因此它可用于更新“链接”。当然,您也可以将相同的函数绑定到页面的加载事件以创建初始“链接”。
If you want to use jQuery anyway, I would recommend to use the draggable-functionality of jQuery UI. It easily enables you to make elements draggable and also allows you to bind a custom function to a
drag
-event. This function is then called whenever the user moves his mouse while dragging the element, so it could be used to update the "links".Of course, you can also bind the same function to the load-event of the page to create the initial "links".
如果您使用 Jquery UI 进行拖动,您可以定义
start
,drag
或stop
事件来执行适当的工作。我看到的挑战是每个节点都必须知道与其连接的内容。我之前通过创建自己的属性来完成此操作。使用上面的 2 节点解决方案:
如果您有链接到多个其他节点的节点,您可以执行类似于
分隔子节点列表的操作。然后检索此信息进行处理就像 var Children = $(this).attr('children').split(';'); 一样简单,这将为您提供一个数组儿童身份证。您还可以获取元素和子元素的位置、计算距离并修改链接。
If you use Jquery UI for your dragging, you could define the
start
,drag
, orstop
events to do the appropriate work.The challenge I see is that each node will have to know what is connected to it. I have done this before by creating my own attributes. Using your 2 node solution above:
If you have nodes linked to multiple other nodes, you could just do something like
with a delimited list of children. Then retrieving this information for your processing would be as simple as
var children = $(this).attr('children').split(';');
and that will get you an array of the children's id's. You can also get the position of the element and the children, calculate the distance, and modify your links.