Drag and drop of a table row.

@nectorsolApr 08.2006

Hai,
Please help me to drag and drop a table which has five <td>.Now I should be able to drag and drop that row at a time by holding the 0th <td>.
PLease help with some code or with some URL where i could find some stuff regarding the above mentioned.

Thanking you
-nectorsol.

to post a comment

JavaScript

16 Comments(s) _↴

@DracoMerestApr 08.2006 — #Example can be found [URL=http://www.iinet.net.au/~htjs/javascript/dragtrdrop/dragtrdrop.htm]Here[/URL] nectorsol.

@VladdyApr 08.2006 — #IE Only :rolleyes:

@DracoMerestApr 08.2006 — #Sorry Vladdy, when any other browser gets anywhere near IE for populatiry I'll support it.

[URL=http://www.thecounter.com/stats/2006/March/browser.php]Reference[/URL]

When Netscape 7 was released there was a slow but steady increase of IE users. Since NS7 changed in some minor ways which annoyed me, and having had semi-supported IE, I just switched. I'm waiting for the pendulum to swing back. Please do not hold your breath for me to even install FF on my computer until it hits 33%.

Still, it's an elegant solution don't you think?

@VladdyApr 08.2006 — #Thanks for good laugh.

Just curious what you are doing on this forum, you are sure no web developer....

@DracoMerestApr 08.2006 — #It's 2am, I've got my schedule under control (visual programmer), I'm not tired, bored. Solved a web request for friend ([URL=http://www.iinet.net.au/~htjs/javascript/rotate/]SAMPLE[/URL]) Thought I'd continue playing with JavaScript for a while.

I was a member of a web developement team but it's too annoying when banks decide to change their loan methods and I have to rewrite the calculator scripts or a wine cellar gets a new accountant who thinks he knows how web pages should submit online order forms etc... Not to mention competing browsers! I hate writing two or more version of the same script.

eg: hospital menu system failed with NS4 but NS5+ was ok. The geeks in the basement demanded I cater to this version. I managed to locate their log files and guess what? They were the only ones using NS4. (oh and the poor guy in the car park attendant booth was stuck with IE3.1 ? )

lastly, I've come here cos there's not much happening at the OzoneLayer and I've a long history with TheJavaScript Source starting when Ronnie Moore had about 100 scripts.

@vwphillipsApr 08.2006 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 
 var zxcRRow,zxcRows;
 var zxcMseX,zxcMseY;
 
 function zxcDragRow(zxcobj){
 if (zxcRRow){ return; }
 var zxcrow;
 var zxctbdy=zxcobj;
 while (zxctbdy.tagName!='TBODY'){
 if (zxctbdy.tagName=='TR'){ zxcrow=zxctbdy; }
 zxctbdy=zxctbdy.parentNode;
 }
 zxcRRow=zxcrow;
 zxctbdy.removeChild(zxcrow);
 zxcRows=zxctbdy.getElementsByTagName('TR');
 }
 
 function zxcDrop(event) {
 if (!zxcRRow){ return; }
 zxcMse(event);
 for (var zxc0=zxcRows.length-1;zxc0>=0;zxc0--){
 if (zxcPos(zxcRows[zxc0])[1]<zxcMseY){
 zxcRows[zxc0].parentNode.insertBefore(zxcRRow,zxcRows[zxc0]);
 zxcRRow=null;
 return;
 }
 }
 zxcRows[0].parentNode.insertBefore(zxcRRow,zxcRows[0]);
 }
 
 function zxcPos(zxc){
 zxcObjLeft = zxc.offsetLeft;
 zxcObjTop = zxc.offsetTop;
 while(zxc.offsetParent!=null){
 zxcObjParent=zxc.offsetParent;
 zxcObjLeft+=zxcObjParent.offsetLeft;
 zxcObjTop+=zxcObjParent.offsetTop;
 zxc=zxcObjParent;
 }
 return [zxcObjLeft,zxcObjTop];
 }
 
 function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ zxcMseX=event.clientX+zxcDocS()[0]; zxcMseY=event.clientY+zxcDocS()[1]; }
 else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
 }
 
 function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy]
 }
 
 document.onmousedown=function(event){zxcDrop(event);}
 
 //-->
 </script></head>
 
 <body>
 <br><br>
 <br><br><br><br><br><br><br><br>
 <center>
 <table cellpadding="0" cellspacing="0" border="1">
 <tbody>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onmouseup="zxcDragRow(this);" ></td>
 <td width=100 >0</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >1</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >2</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >3</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >4</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >5</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >6</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >7</td>
 </tr>
 <tr height=5 >
 <td width=100 ></td>
 <td width=100 ></td>
 </tr>
 </tbody>
 </table>
 </center>
 </body>
 
 </html>
 [/CODE]

@vwphillipsApr 08.2006 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 var zxcRRow,zxcRows,zxcMseY,zxcDDiv,zxcDDivC;
 
 function zxcDragRow(zxcobj){
 if (zxcRRow){ return; }
 var zxcbdy=document.getElementsByTagName('BODY')[0];
 var zxcrow=zxcobj;
 while (zxcrow.tagName!='TR'){ zxcrow=zxcrow.parentNode;  }
 if (!zxcDDiv){
 zxcAddEvt1(document,'zxcMse','mousemove');
 zxcAddEvt2(document,'zxcDrop','mousedown');
 zxcDDiv=document.createElement('DIV');
 zxcStyle(zxcDDiv,{position:'absolute',visibility:'hidden',zIndex:10});
 zxcbdy.appendChild(zxcDDiv);
 }
 zxcRRow=zxcrow;
 zxcDDivC=zxcDDiv.cloneNode(false);
 zxcStyle(zxcDDivC,{visibility:'visible',left:zxcPos(zxcrow)[0]+'px',top:(zxcPos(zxcrow)[1])+'px',width:zxcrow.offsetWidth+'px'});
 zxcbdy.appendChild(zxcDDivC);
 var zxctbdy=zxcrow.parentNode;
 var zxcTable=zxctbdy.parentNode.cloneNode(false);
 var zxctbdyc=zxctbdy.cloneNode(false);
 zxcrow.parentNode.removeChild(zxcrow);
 zxctbdyc.appendChild(zxcrow);
 zxcTable.appendChild(zxctbdyc);
 zxcRows=zxctbdy.getElementsByTagName('TR');
 zxcDDivC.appendChild(zxcTable);
 }
 
 function zxcDrop(event) {
 if (!zxcRRow){ return; }
 zxcMse(event);
 zxcRRow.parentNode.removeChild(zxcRRow);
 for (var zxc0=zxcRows.length-1;zxc0>=0;zxc0--){
 if (zxcPos(zxcRows[zxc0])[1]<zxcMseY){
 zxcRows[zxc0].parentNode.insertBefore(zxcRRow,zxcRows[zxc0]);
 zxcRRow=null;
 break;
 }
 }
 if (zxcRRow){ zxcRows[0].parentNode.insertBefore(zxcRRow,zxcRows[0]); zxcRRow=null; }
 zxcDDivC.parentNode.removeChild(zxcDDivC);
 }
 
 function zxcPos(zxc){
 zxcObjLeft=zxc.offsetLeft;
 zxcObjTop=zxc.offsetTop;
 while(zxc.offsetParent!=null){
 zxcObjParent=zxc.offsetParent;
 zxcObjLeft+=zxcObjParent.offsetLeft;
 zxcObjTop+=zxcObjParent.offsetTop;
 zxc=zxcObjParent;
 }
 return [zxcObjLeft,zxcObjTop];
 }
 
 function zxcMse(zxcevt){
 if(!zxcevt) var zxcevt=window.event;
 if (document.all){ zxcMseY=zxcevt.clientY+zxcDocS(); }
 else { zxcMseY=zxcevt.pageY; }
 if (zxcRRow){  zxcStyle(zxcDDivC,{top:zxcMseY+'px'}); }
 }
 
 function zxcDocS(){
 var zxcsy;
 if (!document.body.scrollTop){ zxcsy=document.documentElement.scrollTop; }
 else {  zxcsy=document.body.scrollTop; }
 return zxcsy
 }
 
 function zxcStyle(zxcele,zxcstyle){
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 }
 
 function zxcEventAdd(zxco,zxct,zxcf) {
 if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco["on" + zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt1(zxc,zxcfun,zxcevt){
 if (zxc.addEvt1){ return; }
 zxc.addEvt1=window[zxcfun];
 zxcEventAdd(zxc,zxcevt,'addEvt1');
 }
 
 function zxcAddEvt2(zxc,zxcfun,zxcevt){
 if (zxc.addEvt2){ return; }
 zxc.addEvt2=window[zxcfun];
 zxcEventAdd(zxc,zxcevt,'addEvt2');
 }
 
 //-->
 </script>
 
 </head>
 
 <body>
 <br><br>
 <br><br><br><br><br><br><br><br>
 <center>
 <table cellpadding="0" cellspacing="0" border="1">
 <tbody>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onmouseup="zxcDragRow(this);" ></td>
 <td width=100 >0</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >1</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >2</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >3</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >4</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >5</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >6</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >7</td>
 </tr>
 <tr height=0  >
 <td width=100 colspan="2" ></td>
 </tr>
 </tbody>
 </table>
 <br>
 <br>
 <table cellpadding="0" cellspacing="0" border="1">
 <tbody>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onmouseup="zxcDragRow(this);" ></td>
 <td width=100 >10</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >11</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >12</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >13</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >14</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >15</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >16</td>
 </tr>
 <tr height=30 >
 <td width=100 ><input type="button" name="" value="Drag" onclick="zxcDragRow(this);" ></td>
 <td width=100 >17</td>
 </tr>
 <tr height=0  >
 <td width=100 colspan="2" ></td>
 </tr>
 </tbody>
 </table>
 </center>
 </body>
 
 </html>[/CODE]

@nectorsolauthorApr 09.2006 — #HAI,

I wish to drag and drop a cell in a table of 5 columns and rows.The could be drag and dropped anywhere in that table i.e any row or any column,but there should be duplicate cells.So if anyone ever did this could you please help me.

Thanking you,

-nectorsol

@DracoMerestApr 09.2006 — #Do you mean to say that all the code above and my example is not what you wanted? If you click and hold the "FIRST" <TD> cell, you can move the entire ROW anywhere you like. You can essentially drag and then drop that row of cells.

If this is not what you want then please make sure you ask for what you want. Your second description makes little sense.

@vwphillipsApr 09.2006 — #see

[URL]http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f63[/URL]

@DracoMerestApr 09.2006 — #Hey, I like that Vic. Very nice.

@FangApr 09.2006 — #[B]vwphilips[/B] There's a bug in the script which makes it possible to duplicate row0

@vwphillipsApr 09.2006 — #here's a bug in the script which makes it possible to duplicate row0[/QUOTE]

Fang

It is specified to do that in the event call for row 0

see Application Notes

@my_aroMar 02.2008 — #hi vwphillips,

i really like your second example having drag and drop on each table, is there a way where you can drag and drop elements from 1 table to another table instead?

Godspeed,

my_aro

@vwphillipsMar 03.2008 — #

[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></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 // by Vic Phillips (04-March-2008)
 
 var zxcDObj;
 var zxcDTable=[];
 
 function zxcInitDragRow(zxcid){
 var zxctable=document.getElementById(zxcid);
 zxcDTable.push([zxctable,zxctable.rows[0].cells.length]);
 zxcclone=zxcES(zxctable.cloneNode(true),{position:'absolute'},document.getElementsByTagName('BODY')[0]);
 var zxctbdy=zxcclone.getElementsByTagName('TBODY')[0];
 while (zxctbdy.firstChild) zxctbdy.removeChild(zxctbdy.firstChild);
 var zxcrows=zxctable.rows;
 for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
 zxcrows[zxc0].clone=zxcclone;
 zxcrows[zxc0].table=zxctable;
 zxcAddEvt(zxcrows[zxc0],'zxcDragRowSrt','mousedown');
 }
 }
 
 function zxcDragRowSrt(zxcevt){
 if (this.table.rows.length<2) return;
 document.onselectstart=function(event){window.event.returnValue=false; }
 var zxcclone=zxcES(this.cloneNode(true),{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'},this.clone.getElementsByTagName('TBODY')[0]);
 zxcES(this.clone,{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'});
 var zxccells=this.cells;
 for (var zxc0=0;zxc0<zxccells.length;zxc0++) zxcES(zxcclone.cells[zxc0],{width:zxccells[zxc0].width});
 zxcDObj=[this.clone,this.clone.offsetLeft-zxcMse(zxcevt)[0],this.clone.offsetTop-zxcMse(zxcevt)[1],this];
 }
 
 function zxcDragRow(zxcevt){
 if (zxcDObj){
 zxcES(zxcDObj[0],{left:(zxcMse(zxcevt)[0]+zxcDObj[1])+'px',top:zxcMse(zxcevt)[1]+zxcDObj[2]+'px'});
 return false;
 }
 }
 
 function zxcRowMseUp(){
 document.onselectstart=null;
 if (!zxcDObj) return;
 for (var zxc0=0;zxc0<zxcDTable.length;zxc0++){
 var zxctpos=zxcPos(zxcDTable[zxc0][0]);
 if (zxcDTable[zxc0][1]==zxcDObj[3].cells.length&&zxctpos[0]-10<zxcDObj[0].offsetLeft&&zxctpos[0]+zxcDTable[zxc0][0].offsetWidth>zxcDObj[0].offsetLeft&& zxctpos[1]-zxcDObj[3].offsetHeight<zxcDObj[0].offsetTop &&zxctpos[1]+zxcDTable[zxc0][0].offsetHeight>zxcDObj[0].offsetTop){
 var zxctrs=zxcDTable[zxc0][0].rows;
 for (var zxc0a=0;zxc0a<zxcDTable[zxc0][1];zxc0a++) zxcES(zxcDObj[3].cells[zxc0a],{width:zxcDTable[zxc0][0].rows[0].cells[zxc0a].offsetWidth+'px'})
 for (var zxc0b=0;zxc0b<zxctrs.length;zxc0b++){
 if (zxcPos(zxctrs[zxc0b])[1]>zxcPos(zxcDObj[0])[1]&&zxctrs[zxc0b]!=zxcDObj[3]){
 zxctrs[0].parentNode.insertBefore(zxcDObj[3],zxctrs[zxc0b]);
 zxcDObj[3]=null;
 break;
 }
 }
 if (zxcDObj[3]) zxctrs[0].parentNode.appendChild(zxcDObj[3]);
 }
 }
 var zxctr=zxcDObj[0].getElementsByTagName('TR')[0];
 if (zxctr) zxctr.parentNode.removeChild(zxctr);
 zxcDObj=false;
 }
 
 function zxcMse(e){
 if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
 else { return [event.clientX,event.clientY]; }
 }
 
 function zxcDocS(){
 if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
 else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
 }
 
 function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxcp){ zxcp.appendChild(zxcele); }
 if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
 return zxcele;
 }
 
 function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
 zxcpar=zxcobj.offsetParent;
 zxclft+=zxcpar.offsetLeft;
 zxctop+=zxcpar.offsetTop;
 zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
 }
 
 function zxcEventAdd(zxco,zxct,zxcf) {
 if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e);}, false); }
 else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco["on" + zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
 zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
 zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt);
 }
 
 
 zxcAddEvt(document,'zxcDragRow','mousemove');
 zxcAddEvt(document,'zxcRowMseUp','mouseup');
 
 
 /*]]>*/
 </script>
 
 
 
 </head>
 
 <body onload="zxcInitDragRow('tst1');zxcInitDragRow('tst2');" >
 http://www.webdeveloper.com/forum/showthread.php?t=102321
 <br />
 <table id="tst1" border="1">
 <tbody>
 <tr>
 <td>Some text 1</td>
 </tr>
 <tr>
 <td>Some text 2</td>
 </tr>
 <tr>
 <td>Some text 3</td>
 </tr>
 </tbody>
 </table>
 <br />
 <table id="tst2" border="1">
 <tbody>
 <tr>
 <td>Some text 1</td>
 </tr>
 <tr>
 <td>Some text 2</td>
 </tr>
 <tr>
 <td>Some text 3</td>
 </tr>
 </tbody>
 </table>
 
 </body>
 
 </html>[/CODE]

@vwphillipsMay 02.2009 — #from email
One problem I've noticed though is that when you drag a row from the

bottom table into the top table, the dragged row never leaves the

cursor, but does appear in the table. This problem does not occur when

you drag the row from the top table to the bottom table.
[/QUOTE]

[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></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 // by Vic Phillips (04-March-2008)
 
 var zxcDObj;
 var zxcDTable=[];
 
 function zxcInitDragRow(zxcid){
 var zxctable=document.getElementById(zxcid);
 zxcDTable.push([zxctable,zxctable.rows[0].cells.length]);
 zxcclone=zxcES(zxctable.cloneNode(true),{position:'absolute'},document.getElementsByTagName('BODY')[0]);
 var zxctbdy=zxcclone.getElementsByTagName('TBODY')[0];
 while (zxctbdy.firstChild) zxctbdy.removeChild(zxctbdy.firstChild);
 var zxcrows=zxctable.rows;
 for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
 zxcrows[zxc0].clone=zxcclone;
 zxcrows[zxc0].table=zxctable;
 zxcAddEvt(zxcrows[zxc0],'zxcDragRowSrt','mousedown');
 }
 }
 
 function zxcDragRowSrt(zxcevt){
 if (this.table.rows.length<2) return;
 document.onselectstart=function(event){window.event.returnValue=false; }
 var zxcclone=zxcES(this.cloneNode(true),{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'},this.clone.getElementsByTagName('TBODY')[0]);
 zxcES(this.clone,{left:zxcPos(this)[0]+'px',top:zxcPos(this)[1]+'px'});
 var zxccells=this.cells;
 for (var zxc0=0;zxc0<zxccells.length;zxc0++) zxcES(zxcclone.cells[zxc0],{width:zxccells[zxc0].width});
 zxcDObj=[this.clone,this.clone.offsetLeft-zxcMse(zxcevt)[0],this.clone.offsetTop-zxcMse(zxcevt)[1],this];
 }
 
 function zxcDragRow(zxcevt){
 if (zxcDObj){
 zxcES(zxcDObj[0],{left:(zxcMse(zxcevt)[0]+zxcDObj[1])+'px',top:zxcMse(zxcevt)[1]+zxcDObj[2]+'px'});
 return false;
 }
 }
 
 function zxcRowMseUp(){
 document.onselectstart=null;
 if (!zxcDObj) return;
 for (var zxc0=0;zxc0<zxcDTable.length;zxc0++){
 var zxctpos=zxcPos(zxcDTable[zxc0][0]);
 if ([COLOR="Red"]zxcDObj[3]&&[/COLOR]zxcDTable[zxc0][1]==zxcDObj[3].cells.length&&zxctpos[0]-10<zxcDObj[0].offsetLeft&&zxctpos[0]+zxcDTable[zxc0][0].offsetWidth>zxcDObj[0].offsetLeft&& zxctpos[1]-zxcDObj[3].offsetHeight<zxcDObj[0].offsetTop &&zxctpos[1]+zxcDTable[zxc0][0].offsetHeight>zxcDObj[0].offsetTop){
 var zxctrs=zxcDTable[zxc0][0].rows;
 for (var zxc0a=0;zxc0a<zxcDTable[zxc0][1];zxc0a++) zxcES(zxcDObj[3].cells[zxc0a],{width:zxcDTable[zxc0][0].rows[0].cells[zxc0a].offsetWidth+'px'})
 for (var zxc0b=0;zxc0b<zxctrs.length;zxc0b++){
 if (zxcPos(zxctrs[zxc0b])[1]>zxcPos(zxcDObj[0])[1]&&zxctrs[zxc0b]!=zxcDObj[3]){
 zxctrs[0].parentNode.insertBefore(zxcDObj[3],zxctrs[zxc0b]);
 zxcDObj[3]=null;
 break;
 }
 }
 if (zxcDObj[3]) zxctrs[0].parentNode.appendChild(zxcDObj[3]);
 }
 }
 var zxctr=zxcDObj[0].getElementsByTagName('TR')[0];
 if (zxctr) zxctr.parentNode.removeChild(zxctr);
 zxcDObj=false;
 }
 
 function zxcMse(e){
 if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
 else { return [event.clientX,event.clientY]; }
 }
 
 function zxcDocS(){
 if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
 else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
 }
 
 function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxcp){ zxcp.appendChild(zxcele); }
 if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
 return zxcele;
 }
 
 function zxcPos(zxcobj){
 zxclft=zxcobj.offsetLeft;
 zxctop=zxcobj.offsetTop;
 while(zxcobj.offsetParent!=null){
 zxcpar=zxcobj.offsetParent;
 zxclft+=zxcpar.offsetLeft;
 zxctop+=zxcpar.offsetTop;
 zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
 }
 
 function zxcEventAdd(zxco,zxct,zxcf) {
 if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ return zxco[zxcf](e);}, false); }
 else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ return zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco["on" + zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj['zxcadd'+zxcfun+zxcevt]) return;
 zxcobj['zxcadd'+zxcfun+zxcevt]=window[zxcfun];
 zxcEventAdd(zxcobj,zxcevt,'zxcadd'+zxcfun+zxcevt);
 }
 
 
 zxcAddEvt(document,'zxcDragRow','mousemove');
 zxcAddEvt(document,'zxcRowMseUp','mouseup');
 
 
 /*]]>*/
 </script>
 
 
 
 </head>
 
 <body onload="zxcInitDragRow('tst1');zxcInitDragRow('tst2');" >
 http://www.webdeveloper.com/forum/showthread.php?t=102321
 <br />
 <table id="tst1" border="1">
 <tbody>
 <tr>
 <td>Some text 1</td>
 </tr>
 <tr>
 <td>Some text 2</td>
 </tr>
 <tr>
 <td>Some text 3</td>
 </tr>
 </tbody>
 </table>
 <br />
 <table id="tst2" border="1">
 <tbody>
 <tr>
 <td>Some text 1</td>
 </tr>
 <tr>
 <td>Some text 2</td>
 </tr>
 <tr>
 <td>Some text 3</td>
 </tr>
 </tbody>
 </table>
 
 </body>
 
 </html>[/CODE]

Also in #JavaScript _↴

Change selected option Problem creating event handler function in for loop how can I restrict the number of news in a ticker ?

Success!

Help @nectorsol spread the word by sharing this article on Twitter...

Tweet This

Drag and drop of a table row.

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drag and drop of a table row.

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴