How can I create a Javascript/Jquery algorithmic function that will calculate on load--and re-draw during 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 between nodes to determine how many links 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 hav开发者_运维问答ing 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!

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".

If you use Jquery UI for your dragging, you could define the start, drag, or stop events to do the appropriate work.

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

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

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

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:

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

If you have nodes linked to multiple other nodes, you could just do something like

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

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.