Question

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 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!

Answer 1

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.