Bug Tracker

Ticket #3271: index.html

File index.html, 2.9 KB (added by kwaping, August 20, 2008 06:10PM UTC)

Simple test case. You'll need to point the jquery paths to your own files.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>sortable test</title>
	<meta name="generator" content="BBEdit 8.7">

<style type="text/css">
	.clickable		{ cursor: pointer; cursor: hand }
	.with_underline	{ text-decoration: underline }
	.draggable		{ cursor: move }
	.draggable_line	{ cursor: move }
	.sortable_row	{ background-color: lightgreen; }
	.sortval		{ text-align: right; cursor: move; width: 10px }
	.reg_text		{ width: 480px }
	.sort_helper	{ height: 5px; }
	.bluebg			{ background-color: #00f }
	.redbg			{ background-color: #f00 }
	.ghost			{ opacity: 0.5 }
</style>

<script src="/~ollie/js/jquery-1.2.6.js" type="text/javascript" language="javascript"></script>
<script src="/~ollie/js/ui/ui.core.js" type="text/javascript" language="javascript"></script>
<script src="/~ollie/js/ui/ui.sortable.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function () {

	var relabel = function (e,ui) {
		$('#teh_body tr.sortable_row').each(function (i) {
// 			$('#sortval',ui.helper).text($(this).text());
			$('#sortval',this).text(i + 1);
		});
// 		var arr = $(this.rows);
// 		for (var i in arr) {
// 			$('#sortval',arr[i]).text(i + 1);
// 		}
// 		var rowcount = $('#teh_body tr.sortable_row').length;
	}

	var update = function (e,ui) {
		var floater = ui.helper;
		var ghost = ui.placeholder;
var x = $('#sortval',floater).text();
var y = $('#sortval',ghost).text();
// alert([x,y].join('_'));
// alert('floater id: '+ x +', ghost id: ' + y);
// 		var i;
// 		var arr = $('#teh_body tr.sortable_row');
// 		var len = arr.length;
// 		for (i = 0; i < arr.length; i++) {
// 			var row = arr[i];
// 			$('#sortval',row).text(i + 1);
// 		}
	}

	$('#teh_body').sortable({
		containment:	'parent',
		axis:			'y',
		placeholder:	'sort_helper',
// 		beforeStop:		update,
		handle:			'#sortval',
// 		start:			function (e,ui) {
// 			ui.helper.addClass('ghost');
// 		},
// 		beforeStop:			function (e,ui) {
// 			ui.helper.removeClass('ghost');
// 		},
		update:			relabel
	});

});

</script>

</head>
<body>

<table border="0" cellspacing="5" cellpadding="2" width="500">
	<thead>
	<tr bgcolor="darkgreen">
		<th>id</th>
		<th>value</th>
	</tr>
	</thead>
	<tbody id="teh_body">
	<tr class="sortable_row">
		<td class="sortval" id="sortval">1</td>
		<td class="reg_text">_Row_1_Cell_2_</td>
	</tr>
	<tr class="sortable_row">
		<td class="sortval" id="sortval">2</td>
		<td>_Row_2_Cell_2_</td>
	</tr>
	<tr class="sortable_row">
		<td class="sortval" id="sortval">3</td>
		<td>_Row_3_Cell_2_</td>
	</tr>
	<tr class="sortable_row">
		<td class="sortval" id="sortval">4</td>
		<td>_Row_4_Cell_2_</td>
	</tr>
	<tr class="sortable_row">
		<td class="sortval" id="sortval">5</td>
		<td>_Row_5_Cell_2_</td>
	</tr>
	</tbody>
</table>

<!-- 
<div class="sort_helper" id="sort_helper"></div>
 -->

</body>
</html>

Download in other formats:

Original Format