...

View Full Version : Resolved Help modifying draggable <tr> script (changing and keeping row bold)?



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>

vwphillips
01-18-2009, 01:11 PM
<!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>

Daniellez
01-18-2009, 05:13 PM
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.

vwphillips
01-19-2009, 09:37 AM
<!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>

Daniellez
01-19-2009, 12:58 PM
Wow! You're good you! Thank you immensely!

Blessings,
D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum