I am trying to create a page with div modules which contain various content. These should be able to be dragged by the user and dropped into a new position but I want them to snap into position below or above the other div module where they are dropped. An example of this can be seen on the BBC homepage (http://www.bbc.co.uk).

I have created my basic layout which is a div container with 3 children: left, center, and right. These children will be my columns. Each of the columns have div modules as children but I will want the user to be able to move a div module from one column to another.

As I understand I will be using 3 events for the drag drop facility. One is when the user clicks on a div module (onMouseDown), another is when the user moves the mouse (onMouseMove), and finally when the user releases the mouse button (OnMouseUp). However, I am unsure of how to approach this and particularly how to get the div module to detect where it should snap into place.

My layout html is shown below (very basic due the development and testing):

Code:
<html>
	<head>
		<script type="text/javascript">
		</script>
		<style type="text/css">
			div#container
			{
				position: fixed;
				left: 50%;
				margin-left: -450px;
				width: 900px;
				height: auto;
			}
			div#left
			{
				position: relative;
				width: 300px;
				height: auto;
				float: left;
			}
			div#center
			{
				position: relative;
				width: 300px;
				height: auto;
				float: left;
			}
			div#right
			{
				position: relative;
				width: 300px;
				height: auto;
				float: left;
			}
			.module
			{
				position: relative;
				width: 300px;
				height: auto;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">
				<div id="moveable1" class="module">
					1
				</div>
				<div id="moveable2" class="module">
					2
				</div>
				<div id="moveable3" class="module">
					3
				</div>
			</div>
			<div id="center">
				<div id="moveable4" class="module">
					4
				</div>
				<div id="moveable5" class="module">
					5
				</div>
				<div id="moveable6" class="module">
					6
				</div>
			</div>
			<div id="right">
				<div id="moveable7" class="module">
					7
				</div>
				<div id="moveable8" class="module">
					8
				</div>
				<div id="moveable9" class="module">
					9
				</div>
			</div>
		</div>
	</body>
</html>
Any help and/or advice on this will be much appreciated.

Kind regards,

John Askew