...

View Full Version : Resolved Draggable Table Rows script..limiting it to certain <tr>'s



Daniellez
01-16-2009, 01:41 PM
Hi,

How can this be limited to certain tables/table rows?


<!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,th {
text-align:left;
padding:3px 10px;
border:1px solid white;
}

tr.active td, tr.active th {
background:#ffffe0;
}

tr.target td, tr.target th {
border-top:1px dashed black;
}

</style>

<script type="text/javascript">
// <![CDATA[

// quick 'n dirty,
// oo(h) brother where art thou!

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;
} 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>
<th>lorem</th>
<td>1</td>
<td>a</td>
</tr>
<tr>
<th>ipsum</th>
<td>2</td>
<td>b</td>
</tr>
<tr>
<th>dolor</th>
<td>3</td>
<td>c</td>
</tr>
<tr>
<th>sit</th>
<td>4</td>
<td>d</td>
</tr>
<tr>
<th>amet</th>
<td>5</td>
<td>e</td>
</tr>
</tbody>
</table>

</body>
</html>



-------------------


****Resolved****

Adding the following if statement to the getRow function worked:


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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum