Hi all,

I need to have an Excel like functionality where I can click and hold the mouse,a nd then drag it over a certain amount of List Items or Table Cells.

Whilst doing this it will add the items id or object to an Array and highlight the selected items.

I'd really like it if I could move the mouse away and it will deselect the selected item.

I have the following but it just doesn't give what I need.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script>

var mouseDown = false;
var selectedItems;

function insertIfUnique(item)
{
	if(!selectedItems)
		selectedItems = new Array();

	for(var i = 0; i < selectedItems.length; i++)
	{
		if(item.id == selectedItems[i].id)
			return;
	}
	selectedItems[selectedItems.length] = item;
}
function removeItem(item)
{
	if(!selectedItems)
		return;

	for(var i = 0; i < selectedItems.length; i++)
	{
		if(item.id == selectedItems[i].id)
		{
			selectedItems.splice(i, 1);
			return;
		}
	}
}

function setup()
{
	var tableCells = document.getElementsByTagName('TD');

	for(var i = 0; i < tableCells.length; i++)
	{
		tableCells[i].onmouseout = function()
		{
			//if(mouseDown)
			//{
			//	removeItem(this);
			//	this.style.backgroundColor = '#fff';
			//}
		};
		tableCells[i].onmouseover = function()
		{
			if(mouseDown)
			{
				insertIfUnique(this);
				this.style.backgroundColor = '#ccc';
			}
		};
		tableCells[i].onmousedown = function()
		{
			mouseDown = true;
		};
		tableCells[i].onmouseup = function()
		{
			mouseDown = false;

			for(var v = 0; v < selectedItems.length; v++)
			{
				alert(selectedItems[v].id);
			}
		};
	}
}

window.onload = setup;

</script>

</HEAD>

<BODY>

<table width="500px" height="500px" border="1">

	<tr>
		<td id="cell1" align="center">Item 1</td>
		<td id="cell2" align="center">Item 2</td>
		<td id="cell3" align="center">Item 3</td>
	</tr>
	<tr>
		<td id="cell4" align="center">Item 4</td>
		<td id="cell5" align="center">Item 5</td>
		<td id="cell6"align="center">Item 6</td>
	</tr>
	<tr>
		<td id="cell7" align="center">Item 7</td>
		<td id="cell8" align="center">Item 8</td>
		<td id="cell9" align="center">Item 9</td>
	</tr>

</table>

</BODY>
</HTML>