Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to move table rows around using drag and drop

Drag and Drop

How to move table rows around using drag and drop

by  BillyRayPreachersSon  Posted    (Edited  )
This code will enable you to move table rows around using drag-and-drop functionality. It only works in IE.

The image in the left-hand cell should be used to initiate the dragging operation. The drop position is highlighted as you drag the row around.

Code: 
<html>
<head>
	<style type="text/css">
		tr, tr td {
			border: 1px #999999 solid;
			border-bottom: 2px #999999 solid;
			background-color: #FFFFFF;
		}

		tr.underline, tr.underline td {
			border-bottom: 2px #000000 solid;
			background-color: #CCCCCC;
		}
	</style>
	<script type="text/javascript">
	<!--
		var draggingRow = false;
		var sourceRow = null;

		function startedDragging() {
			draggingRow = true;
			sourceRow = event.srcElement.parentNode.parentNode;
		}

		function dragEnter() {
			if (draggingRow) window.event.returnValue = false;
		}

		function dragOver() {
			if (draggingRow) {
				var targetRow = event.srcElement;
				while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
				targetRow.className = 'underline';
				window.event.returnValue = false;
			}
		}

		function dragLeave() {
			if (draggingRow) {
				var targetRow = event.srcElement;
				while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
				targetRow.className = '';
			}
		}

		function dropped() {
			if (draggingRow) {
				targetRow = event.srcElement;
				while (targetRow.parentNode != null && targetRow.tagName && targetRow.tagName.toLowerCase() != 'tr') targetRow = targetRow.parentNode;
				targetRow.className = '';
				sourceRow.swapNode(targetRow);
				draggingRow = false;
			}
		}

		var iconForDragging = '#define icon_width 4\n#define icon_height 4\nstatic char icon_bits[] = { 0x05, 0x0A, 0x05, 0x0A };';
	//-->
	</script>
</head>
<body ondrop="dropped();">
	<table id="dragDropTable" border="0" cellpadding="2" cellspacing="0">
		<thead></thead>
		<tbody>
			<tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();">
				<td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
				<td>Row 0, Cell 1</td>
				<td>Row 0, Cell 2</td>
				<td>Row 0, Cell 3</td>
			</tr>
			<tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
				<td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
				<td>Row 1, Cell 1</td>
				<td>Row 1, Cell 2</td>
				<td>Row 1, Cell 3</td>
			</tr>
			<tr ondragenter="dragEnter();" ondragover="dragOver();" ondragleave="dragLeave();" ondrop="dropped();">
				<td><img src="javascript:iconForDragging;" width="16" height="16" ondragstart="startedDragging();"></td>
				<td>Row 2, Cell 1</td>
				<td>Row 2, Cell 2</td>
				<td>Row 2, Cell 3</td>
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>
</body>
</html>

Enjoy! ;o)

Dan


[link http://www.coedit.co.uk/][color #00486F]Coedit Limited[/color][/link][color #000000] - Delivering standards compliant, accessible web solutions[/color]

[tt]Dan's Page [blue]@[/blue] Code Couch
http://www.codecouch.com/dan/[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top