Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

Draw Connecting Lines between Items on a Web Page (Mozilla/Internet Explorer)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
26 Aug 2009CPOL2 min read 45.2K   892   29   6
GUI allows user to "connect" items shown on a web application; lines are drawn dynamically showing connections
Image 1

Introduction

This simple HTML page displays two columns of items, representing items in two tables in a database. The interface allows the user to "connect" these items in a 1-to-1 format by clicking them. A line is drawn between connected items, giving the user a graphic representation of their connections. Connections can also be removed by the user clicking a connected item again.

Background

This is an extension of a line-drawing method described by Doga Arinir in his article: Drawing Lines in Mozilla Based Browsers and the Internet Explorer.

Using the Code

Everything is in a single HTML file (except the server-side save function, not included). When the user clicks an item in either table, the item is prepared to be connected. If the user then clicks an unconnected item from the other table, a connection is made. A line is drawn to show the connection. The connections are made by the following two functions:

JavaScript
function setSource(oSrc) {
	//if another source was clicked first, unhilite it
	if (oSource != null) {
		if (oSource.className == "treeItem_hi") {
			oSource.className = "treeItem";
		}
		oSource = null;
	}
	//if this source is already set, clear its line and its target
	if (oSrc.className == "treeItem_set") {
		//this source was already set; clear
		clearElementSetting(oSrc.id);
	}
	oSrc.className = "treeItem_hi";
	oSource = oSrc;
	if (oTarget != null) {
		drawLine();  //line is drawn from current Source to current Target
		oSource = null;
		oTarget = null;
	}
}
function setTarget(oTar) {
	if (oTarget != null) {
		if (oTarget.className == "treeItem_hi") {
			oTarget.className = "treeItem";
		}
		oTarget = null;
	}
	if (oTar.className == "treeItem_set") {
		//this target already has a source; clear
		clearElementSetting(oTar.id);
	}
	oTar.className = "treeItem_hi";
	oTarget = oTar;
	if (oSource != null) {
		drawLine();  //line is drawn from current Source to current Target
		oSource = null;
		oTarget = null;
	}
}

When an item is clicked, it clears any previously clicked (but not connected) item in its table. Any existing connections to the clicked item are removed. Then if an item was already clicked in the other table, it connects them. By design, if a connection is made to an item that is already connected, the new connection overrides the old one.

In the HTML, onClick event handlers for the source and target items call the functions respectively:

HTML
<span id="Item0_0" class="treeItem" onclick="setSource(this)">Source Item One</span>
<span id="Item1_0" class="treeItem" onclick="setTarget(this)">Target Item 1</span>

Points of Interest

The only "tricky" part of this project was getting connector lines to disappear when their source or target items were clicked again. Since this model is a 1-to-1 data relationship, multiple connections to a single item are not allowed. (You could allow multiple connections with a little more work on the "Package Up" routine). To accomplish this, I've added two custom attributes to each "line segment" DIV: mySrc and myTar. When an element on the page is clicked, the code checks to see if it was already connected (by checking its current style definition). If it was, the "canvas" where all the lines are contained is searched for the line that connected that item. The line is then removed from the document.

Future Work

I have not yet addressed pre-populating the page with the connections currently stored in the database. This would be necessary if this tool was used to edit existing cross-reference connections between items.

History

  • 26th August, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionIs it possible to draw one source row to multiple targets rows. Pin
Member 1073299126-Aug-15 19:58
Member 1073299126-Aug-15 19:58 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey22-Feb-12 0:21
professionalManoj Kumar Choubey22-Feb-12 0:21 
GeneralIt's great!. What changes are needed to reload and edit Pin
sdfor27-May-11 5:32
sdfor27-May-11 5:32 
This code works great to create the links between objects. What javascript would I have to change to re-draw the lines programmatically when I re-loaded the objects from a database ?

This is needed to show what connections were previously made, allow changes, or allow someone to stop in the middle and continue later.

Thanks
GeneralRe: It's great!. What changes are needed to reload and edit Pin
Mr. James Love27-May-11 7:15
Mr. James Love27-May-11 7:15 
GeneralAnother graphics lib Pin
gstolarov3-Sep-09 14:01
gstolarov3-Sep-09 14:01 
GeneralGreat 5* Pin
Anthony Daly29-Aug-09 9:20
Anthony Daly29-Aug-09 9:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.