Daniellez
01-18-2009, 12:01 PM
With the script, when you "grab" a table row to move it changes to bold (tr.active td). How can this be modified so that the row remains bold after it's moved? Similar to the way a standard href link changes to and remains a designated color after it has been visited.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Draggable table rows </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
font-family:arial,tahoma,verdana;
font-size:11px;
}
table {
border-spacing:0;
border:1px solid silver;
caption-side:bottom;
}
td {
text-align:left;
padding:3px 10px;
border:1px solid white;
}
tr.active td {
background:#ffffe0;
font-weight: bold;
}
tr.target td {
border-top:1px dashed black;
}
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function() {
var current = null;
var dragTarget = null;
var dragState = false;
function toggleCurrent(row) {
if(current) current.className = current.className.replace(/\bactive\b/g, ' ');
(current = row).className += ' active';
}
function toggleTarget(row) {
if(dragTarget) dragTarget.className = dragTarget.className.replace(/\btarget\b/g, ' ');
dragTarget = row;
if(row) row.className += ' target';
}
function cancelEvent(e) {
try {
e.preventDefault();
e.stopPropagation();
} catch (exception) {
e.returnValue = false;
} return false;
}
function getRow(e) {
var target = e.target;
while(target && !/^tr$/i.test(target.nodeName)) {
target = target.parentNode;
}
if(!target || !target.className || target.className.indexOf('draggable') == -1)
return;
return target;
}
if(!document.addEventListener) { // IIIEEEE!!!
document.addEventListener = function(type, handler) {
document.attachEvent('on'+type, function(e) {
e.target = e.srcElement;
return handler(e);
});
}
}
document.addEventListener('mousedown', function(e){
var target = getRow(e);
if(target) {
toggleCurrent(target);
dragState = true;
return cancelEvent(e);
}
}, false);
document.addEventListener('mousemove', function(e){
if(!dragState) return;
toggleTarget(getRow(e));
return cancelEvent(e);
}, false);
document.addEventListener('mouseup', function(e) {
if(dragState && current && dragTarget)
dragTarget.parentNode.insertBefore(current, dragTarget);
dragState = false;
toggleTarget(false);
}, false);
}
// ]]>
</script>
</head>
<body>
<table>
<caption>drag table rows</caption>
<tbody>
<tr class="draggable">
<td>lorem</td>
<td>1</td>
<td>a</td>
</tr>
<tr class="draggable">
<td>ipsum</td>
<td>2</td>
<td>b</td>
</tr>
<tr class="draggable">
<td>dolor</td>
<td>3</td>
<td>c</td>
</tr>
<tr class="draggable">
<td>sit</td>
<td>4</td>
<td>d</td>
</tr>
<tr class="draggable">
<td>amet</td>
<td>5</td>
<td>e</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Draggable table rows </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
font-family:arial,tahoma,verdana;
font-size:11px;
}
table {
border-spacing:0;
border:1px solid silver;
caption-side:bottom;
}
td {
text-align:left;
padding:3px 10px;
border:1px solid white;
}
tr.active td {
background:#ffffe0;
font-weight: bold;
}
tr.target td {
border-top:1px dashed black;
}
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function() {
var current = null;
var dragTarget = null;
var dragState = false;
function toggleCurrent(row) {
if(current) current.className = current.className.replace(/\bactive\b/g, ' ');
(current = row).className += ' active';
}
function toggleTarget(row) {
if(dragTarget) dragTarget.className = dragTarget.className.replace(/\btarget\b/g, ' ');
dragTarget = row;
if(row) row.className += ' target';
}
function cancelEvent(e) {
try {
e.preventDefault();
e.stopPropagation();
} catch (exception) {
e.returnValue = false;
} return false;
}
function getRow(e) {
var target = e.target;
while(target && !/^tr$/i.test(target.nodeName)) {
target = target.parentNode;
}
if(!target || !target.className || target.className.indexOf('draggable') == -1)
return;
return target;
}
if(!document.addEventListener) { // IIIEEEE!!!
document.addEventListener = function(type, handler) {
document.attachEvent('on'+type, function(e) {
e.target = e.srcElement;
return handler(e);
});
}
}
document.addEventListener('mousedown', function(e){
var target = getRow(e);
if(target) {
toggleCurrent(target);
dragState = true;
return cancelEvent(e);
}
}, false);
document.addEventListener('mousemove', function(e){
if(!dragState) return;
toggleTarget(getRow(e));
return cancelEvent(e);
}, false);
document.addEventListener('mouseup', function(e) {
if(dragState && current && dragTarget)
dragTarget.parentNode.insertBefore(current, dragTarget);
dragState = false;
toggleTarget(false);
}, false);
}
// ]]>
</script>
</head>
<body>
<table>
<caption>drag table rows</caption>
<tbody>
<tr class="draggable">
<td>lorem</td>
<td>1</td>
<td>a</td>
</tr>
<tr class="draggable">
<td>ipsum</td>
<td>2</td>
<td>b</td>
</tr>
<tr class="draggable">
<td>dolor</td>
<td>3</td>
<td>c</td>
</tr>
<tr class="draggable">
<td>sit</td>
<td>4</td>
<td>d</td>
</tr>
<tr class="draggable">
<td>amet</td>
<td>5</td>
<td>e</td>
</tr>
</tbody>
</table>
</body>
</html>