Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
Regular Coder
Join Date: Jan 2009
Posts: 153
Thanks: 47
Thanked 0 Times in 0 Posts
Help modifying draggable <tr> script (changing and keeping row bold)?
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.
Code:
<!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>
Last edited by Daniellez; 01-19-2009 at 12:58 PM ..
PM User | 2
Senior Coder
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,353
Thanks: 3
Thanked 456 Times in 443 Posts
Code:
<!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;
}
tr.lst td {
font-Weight:bold;
}
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function() {
var current = null;
var dragTarget = null;
var dragState = false;
var lst=null;
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){
if (lst) lst.className=lst.className.replace(/\blst\b/g, ' ');
current.className=current.className+=' lst';
lst=current;
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>
Users who have thanked vwphillips for this post:
PM User | 3
Regular Coder
Join Date: Jan 2009
Posts: 153
Thanks: 47
Thanked 0 Times in 0 Posts
Hi and thank you! I should have clarified this in my post. Is it possible for every row that's moved to remain bold? Your code keeps only the last row bold.
PM User | 4
Senior Coder
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,353
Thanks: 3
Thanked 456 Times in 443 Posts
Code:
<!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;
}
tr.lst td {
font-Weight:bold;
}
</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){
if (!/\blst\b/.test(current.className)) current.className+=' lst';
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>
Users who have thanked vwphillips for this post:
PM User | 5
Regular Coder
Join Date: Jan 2009
Posts: 153
Thanks: 47
Thanked 0 Times in 0 Posts
Wow! You're good you! Thank you immensely!
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 11:27 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
