请问怎么样将一个table的行拖到另一个table上去? 拖动后直接就进入了table2了吗?? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <table id='t1'> <tr id='tr1'> <td>拖动我</td> </tr></table><table id='t2'> <tr id='tr2'> <td>我在这</td> </tr></table>把tr1拖到t2,并在t2上增加tr1的内容 我晕 这个貌似很难去研究下表格排序Sortable.create("list");//排序表格 AJAX可以实现这个功能.我见过!!但代码我不会. 大概写了一下,根据需要再慢慢改吧<!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"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title></head><body><table border="1" id="tab1" width="400"> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> </tr> <tr> <td>111111</td> <td>222222</td> <td>333333</td> </tr></table><table border="1" id="tab2" width="400"> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaaa</td> <td>bbbb</td> <td>cccc</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> </tr> <tr> <td>aaaaaa</td> <td>bbbbbb</td> <td>cccccc</td> </tr> </tbody></table><script type="text/javascript">var floatDiv = null;var floatRow = null;var oft = null;function $(id){ return document.getElementById(id);}function $c(tag,ct){ var el = document.createElement(tag); if(ct) ct.appendChild(el); return el;}//取得节点位置function getDomOffset(el){ for(var lx=0,ly=0;el!=null; el=el.offsetParent) { lx+=el.offsetLeft; ly+=el.offsetTop; } return {x:lx,y:ly} }//取得节点矩形大小,不是很精确,不过差不多可以用了function getRect(el){ var pos = getDomOffset(el); return { x:pos.x, y:pos.y, cx:el.clientWidth, cy:el.clientHeight }}//鼠标是否在矩形内function ptInRect(pt,rect){ return pt.x>rect.x && pt.x<rect.x+rect.cx && pt.y>rect.y && pt.y<rect.y+rect.cy;}//取得鼠标位置function getMouse(ev){ if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //鼠标按下事件处理函数function down(){ var evt = window.event || arguments[0]; var el = evt.srcElement || evt.target; if( el.tagName.toLowerCase() != "td" ) return; floatRow = el.parentNode; var pos = getDomOffset(floatRow); var mouse = getMouse(evt); oft = { x:mouse.x - pos.x, y:mouse.y - pos.y }; floatDiv = $c("div",document.body); floatDiv.style.width = floatRow.clientWidth + "px"; floatDiv.style.height = floatRow.clientHeight + "px"; floatDiv.style.border = "dotted 2px #b45"; floatDiv.style.left = pos.x + "px"; floatDiv.style.top = pos.y + "px"; floatDiv.style.position = "absolute";}//鼠标抬起事件处理函数function up(){ if(floatDiv) { document.body.removeChild(floatDiv); floatDiv = null; } var evt = window.event || arguments[0]; var rect = getRect( $("tab2") ); var mouse = getMouse(evt); if( ptInRect(mouse,rect) ) { //要第一个表格那里,选中的行不消失,就用下面这语句 //$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) ); //下面的语句会删除第一个表格中的行 $("tab2").tBodies[0].appendChild( floatRow ); }}//鼠标移动事件处理函数function move(){ if(floatDiv) { var evt = window.event || arguments[0]; var pos = getMouse(evt); floatDiv.style.left = pos.x - oft.x + "px"; floatDiv.style.top = pos.y - oft.y + "px"; }}window.onload = function(){ document.body.onmousedown = down; document.body.onmouseup = up; document.body.onmousemove = move;}</script></body></html> 不错但floatDiv怎么能够与floatRow 一模一样呢? 给楼上的代码修饰一下.<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table border="1" id="tab1" width="400"> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td>1111</td> <td>2222</td> <td>3333</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> </tr> <tr> <td>111111</td> <td>222222</td> <td>333333</td> </tr> </table> <table border="1" id="tab2" width="400"> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaaa</td> <td>bbbb</td> <td>cccc</td> </tr> <tr> <td>aaaaa</td> <td>bbbbb</td> <td>ccccc</td> </tr> <tr> <td>aaaaaa</td> <td>bbbbbb</td> <td>cccccc</td> </tr> </tbody> </table> <script type="text/javascript"> var floatDiv = null; var floatRow = null; var oft = null; function $(id){ return document.getElementById(id); } function $c(tag, ct){ var el = document.createElement(tag); if (ct) ct.appendChild(el); return el; } //取得节点位置 function getDomOffset(el){ for (var lx = 0, ly = 0; el != null; el = el.offsetParent) { lx += el.offsetLeft; ly += el.offsetTop; } return { x: lx, y: ly } } //取得节点矩形大小,不是很精确,不过差不多可以用了 function getRect(el){ var pos = getDomOffset(el); return { x: pos.x, y: pos.y, cx: el.clientWidth, cy: el.clientHeight } } //鼠标是否在矩形内 function ptInRect(pt, rect){ return pt.x > rect.x && pt.x < rect.x + rect.cx && pt.y > rect.y && pt.y < rect.y + rect.cy; } //取得鼠标位置 function getMouse(ev){ if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } //鼠标按下事件处理函数 function down(){ var evt = window.event || arguments[0]; var el = evt.srcElement || evt.target; if (el.tagName.toLowerCase() != "td") return; floatRow = el.parentNode; var pos = getDomOffset(floatRow); var mouse = getMouse(evt); oft = { x: mouse.x - pos.x, y: mouse.y - pos.y }; floatDiv = $c("div", document.body); floatDiv.style.width = floatRow.clientWidth + "px"; floatDiv.style.height = floatRow.clientHeight + "px"; floatDiv.style.border = "dotted 2px #b45"; floatDiv.style.left = pos.x + "px"; floatDiv.style.top = pos.y + "px"; floatDiv.style.position = "absolute"; var str = '<table border="1" id="tab1" width="400">'; str += floatRow.outerHTML; str += '</table>'; floatDiv.innerHTML = str; } //鼠标抬起事件处理函数 function up(){ if (floatDiv) { document.body.removeChild(floatDiv); floatDiv = null; } var evt = window.event || arguments[0]; var rect = getRect($("tab2")); var mouse = getMouse(evt); if (ptInRect(mouse, rect)) { //要第一个表格那里,选中的行不消失,就用下面这语句 //$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) ); //下面的语句会删除第一个表格中的行 $("tab2").tBodies[0].appendChild(floatRow); } } //鼠标移动事件处理函数 function move(){ if (floatDiv) { var evt = window.event || arguments[0]; var pos = getMouse(evt); floatDiv.style.left = pos.x - oft.x + "px"; floatDiv.style.top = pos.y - oft.y + "px"; } } window.onload = function(){ document.body.onmousedown = down; document.body.onmouseup = up; document.body.onmousemove = move; } </script> </body></html> 大概,把down函数这样改一下吧function down(){ var evt = window.event || arguments[0]; var el = evt.srcElement || evt.target; if( el.tagName.toLowerCase() != "td" ) return; floatRow = el.parentNode; var pos = getDomOffset(floatRow); var mouse = getMouse(evt); oft = { x:mouse.x - pos.x, y:mouse.y - pos.y }; floatDiv = $c("div",document.body); //floatDiv.style.width = floatRow.clientWidth + "px"; //floatDiv.style.height = floatRow.clientHeight + "px"; //floatDiv.style.border = "dotted 2px #b45"; floatDiv.style.left = pos.x + "px"; floatDiv.style.top = pos.y + "px"; floatDiv.style.position = "absolute"; var tab = $("tab1").cloneNode(false); var tbd = $c("tbody",tab); tbd.appendChild(floatRow.cloneNode(true)); floatDiv.appendChild(tab);//在up里,你要愿意,就把floatDiv清空一下,不清空也不会出错} 我测试了IE7和FF3,都可以用啊估计我声明的是UTF-8,你看看是不是把编码搞错了,里面的注释是中文的,编码错了就出错了 拿JK大虾的源代码改了下,基本上实现了我要的功能<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JK:支持民族工业,尽量少买X货</title> <style> .removableObj { height:25;position:relative; } </style> <script language="javascript"> var beginMoving=false; var sourceObj=null; var objectObj=null; var objectObj2=null; function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture(); sourceObj=obj; objectObj=null; } function MouseMoveToMove(obj){ if(!beginMoving) return false; obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX); } function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; window.setTimeout("swapFun()",20); } function MouseOverFun(obj) { if(obj==sourceObj) return false; objectObj=obj; } function MouseOverFun2(obj) { objectObj2=obj; } function swapFun() { //if (objectObj == null) return false; if (sourceObj == objectObj2) { sourceObj = null; objectObj = null; objectObj2 = null; beginMoving = false; } if(sourceObj!=null && objectObj!=null) objectObj.parentNode.insertAdjacentElement("beforeBegin",sourceObj); else if (sourceObj != null && objectObj2 != null) objectObj2.parentNode.insertAdjacentElement("beforeEnd", sourceObj); sourceObj=null; objectObj=null; objectObj2 = null; beginMoving = false; } </script> </head> <body> <table border="1" width="40%" bgcolor="#99CCFF" align='left' > <tr onmouseover='MouseOverFun2(this);' class='removableObj' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="23%">和</td> <td width="21%">飞过海</td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="23%"> </td> <td width="21%"> </td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="23%">和1</td> <td width="21%">飞过海1</td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="23%">A </td> <td width="21%">B </td> </tr> </table> <table border="1" width="40%" bgcolor="#FF9966" > <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="21%">还是</td> <td width="35%">护身符哈</td> <td width="21%"> </td> <td width="23%">呵呵</td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="21%">,</td> <td width="35%">和是是护</td> <td width="21%"> </td> <td width="23%">和</td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="21%">还是1111</td> <td width="35%">护身符哈sfds</td> <td width="21%"> fsdafsaf1`</td> <td width="23%">呵呵32edfdsfdsaf</td> </tr> <tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" > <td width="21%">213ewfdsfc,</td> <td width="35%">和是是护fdsafdsaf</td> <td width="21%"> fdsafdasf</td> <td width="23%">和fdsafdds</td> </tr> </table> </body> </html> 现在的问题是怎么样把拖动的行放到停靠行的后面?而不是在最后加一行 关于ajax的问题 压缩javascript的时候出现的一个问题 IE和Chrome下框架页面通过js提交数据返回后页面traget出现问题。 如何得到指定时间的不同时区时间? 怎样把一个xml串的值赋给表格 高分求一份关于网页制作的文章 如何实现word文件与html文件之间的相互转换? 用javascript怎么判断一段字符串有没有回车? 不知道在location.href("meizz.asp")中能否传递一个参数给打开的网页?? 返回值到主父窗口的select的问题 怎样将图片层提到最上? JAVASCRIPT+CSS的实现效果,求高手指点
<tr id='tr1'>
<td>拖动我</td>
</tr>
</table><table id='t2'>
<tr id='tr2'>
<td>我在这</td>
</tr>
</table>把tr1拖到t2,并在t2上增加tr1的内容
去研究下表格排序
Sortable.create("list");//排序表格
但代码我不会.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1" id="tab1" width="400">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
</tr>
</table>
<table border="1" id="tab2" width="400">
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>bbbbbb</td>
<td>cccccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var floatDiv = null;
var floatRow = null;
var oft = null;
function $(id)
{
return document.getElementById(id);
}
function $c(tag,ct)
{
var el = document.createElement(tag);
if(ct)
ct.appendChild(el);
return el;
}//取得节点位置
function getDomOffset(el)
{
for(var lx=0,ly=0;el!=null; el=el.offsetParent)
{
lx+=el.offsetLeft;
ly+=el.offsetTop;
}
return {x:lx,y:ly}
}//取得节点矩形大小,不是很精确,不过差不多可以用了
function getRect(el)
{
var pos = getDomOffset(el);
return {
x:pos.x,
y:pos.y,
cx:el.clientWidth,
cy:el.clientHeight
}
}//鼠标是否在矩形内
function ptInRect(pt,rect)
{
return pt.x>rect.x && pt.x<rect.x+rect.cx && pt.y>rect.y && pt.y<rect.y+rect.cy;
}//取得鼠标位置
function getMouse(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
} //鼠标按下事件处理函数
function down()
{
var evt = window.event || arguments[0];
var el = evt.srcElement || evt.target;
if( el.tagName.toLowerCase() != "td" )
return;
floatRow = el.parentNode;
var pos = getDomOffset(floatRow);
var mouse = getMouse(evt);
oft = {
x:mouse.x - pos.x,
y:mouse.y - pos.y
};
floatDiv = $c("div",document.body);
floatDiv.style.width = floatRow.clientWidth + "px";
floatDiv.style.height = floatRow.clientHeight + "px";
floatDiv.style.border = "dotted 2px #b45";
floatDiv.style.left = pos.x + "px";
floatDiv.style.top = pos.y + "px";
floatDiv.style.position = "absolute";
}//鼠标抬起事件处理函数
function up()
{
if(floatDiv)
{
document.body.removeChild(floatDiv);
floatDiv = null;
}
var evt = window.event || arguments[0];
var rect = getRect( $("tab2") );
var mouse = getMouse(evt);
if( ptInRect(mouse,rect) )
{
//要第一个表格那里,选中的行不消失,就用下面这语句
//$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );
//下面的语句会删除第一个表格中的行
$("tab2").tBodies[0].appendChild( floatRow );
}
}//鼠标移动事件处理函数
function move()
{
if(floatDiv)
{
var evt = window.event || arguments[0];
var pos = getMouse(evt);
floatDiv.style.left = pos.x - oft.x + "px";
floatDiv.style.top = pos.y - oft.y + "px";
}
}window.onload = function()
{
document.body.onmousedown = down;
document.body.onmouseup = up;
document.body.onmousemove = move;
}
</script>
</body>
</html>
但floatDiv怎么能够与floatRow 一模一样呢?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1" id="tab1" width="400">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
</tr>
</table>
<table border="1" id="tab2" width="400">
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
</tr>
<tr>
<td>aaaaaa</td>
<td>bbbbbb</td>
<td>cccccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var floatDiv = null;
var floatRow = null;
var oft = null;
function $(id){
return document.getElementById(id);
}
function $c(tag, ct){
var el = document.createElement(tag);
if (ct)
ct.appendChild(el);
return el;
}
//取得节点位置
function getDomOffset(el){
for (var lx = 0, ly = 0; el != null; el = el.offsetParent) {
lx += el.offsetLeft;
ly += el.offsetTop;
}
return {
x: lx,
y: ly
}
}
//取得节点矩形大小,不是很精确,不过差不多可以用了
function getRect(el){
var pos = getDomOffset(el);
return {
x: pos.x,
y: pos.y,
cx: el.clientWidth,
cy: el.clientHeight
}
}
//鼠标是否在矩形内
function ptInRect(pt, rect){
return pt.x > rect.x && pt.x < rect.x + rect.cx && pt.y > rect.y && pt.y < rect.y + rect.cy;
}
//取得鼠标位置
function getMouse(ev){
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//鼠标按下事件处理函数
function down(){
var evt = window.event || arguments[0];
var el = evt.srcElement || evt.target;
if (el.tagName.toLowerCase() != "td")
return;
floatRow = el.parentNode;
var pos = getDomOffset(floatRow);
var mouse = getMouse(evt);
oft = {
x: mouse.x - pos.x,
y: mouse.y - pos.y
};
floatDiv = $c("div", document.body);
floatDiv.style.width = floatRow.clientWidth + "px";
floatDiv.style.height = floatRow.clientHeight + "px";
floatDiv.style.border = "dotted 2px #b45";
floatDiv.style.left = pos.x + "px";
floatDiv.style.top = pos.y + "px";
floatDiv.style.position = "absolute";
var str = '<table border="1" id="tab1" width="400">';
str += floatRow.outerHTML;
str += '</table>';
floatDiv.innerHTML = str;
}
//鼠标抬起事件处理函数
function up(){
if (floatDiv) {
document.body.removeChild(floatDiv);
floatDiv = null;
}
var evt = window.event || arguments[0];
var rect = getRect($("tab2"));
var mouse = getMouse(evt);
if (ptInRect(mouse, rect)) {
//要第一个表格那里,选中的行不消失,就用下面这语句
//$("tab2").tBodies[0].appendChild( floatRow.cloneNode(true) );
//下面的语句会删除第一个表格中的行
$("tab2").tBodies[0].appendChild(floatRow);
}
}
//鼠标移动事件处理函数
function move(){
if (floatDiv) {
var evt = window.event || arguments[0];
var pos = getMouse(evt);
floatDiv.style.left = pos.x - oft.x + "px";
floatDiv.style.top = pos.y - oft.y + "px";
}
}
window.onload = function(){
document.body.onmousedown = down;
document.body.onmouseup = up;
document.body.onmousemove = move;
}
</script>
</body>
</html>
大概,把down函数这样改一下吧function down()
{
var evt = window.event || arguments[0];
var el = evt.srcElement || evt.target;
if( el.tagName.toLowerCase() != "td" )
return;
floatRow = el.parentNode;
var pos = getDomOffset(floatRow);
var mouse = getMouse(evt);
oft = {
x:mouse.x - pos.x,
y:mouse.y - pos.y
};
floatDiv = $c("div",document.body);
//floatDiv.style.width = floatRow.clientWidth + "px";
//floatDiv.style.height = floatRow.clientHeight + "px";
//floatDiv.style.border = "dotted 2px #b45";
floatDiv.style.left = pos.x + "px";
floatDiv.style.top = pos.y + "px";
floatDiv.style.position = "absolute";
var tab = $("tab1").cloneNode(false);
var tbd = $c("tbody",tab);
tbd.appendChild(floatRow.cloneNode(true));
floatDiv.appendChild(tab);//在up里,你要愿意,就把floatDiv清空一下,不清空也不会出错
}
我测试了IE7和FF3,都可以用啊
估计我声明的是UTF-8,你看看是不是把编码搞错了,里面的注释是中文的,编码错了就出错了
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
var objectObj2=null;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}
function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj)
{
if(obj==sourceObj) return false;
objectObj=obj;
}
function MouseOverFun2(obj)
{
objectObj2=obj;
}
function swapFun() {
//if (objectObj == null) return false;
if (sourceObj == objectObj2) {
sourceObj = null;
objectObj = null;
objectObj2 = null;
beginMoving = false;
}
if(sourceObj!=null && objectObj!=null) objectObj.parentNode.insertAdjacentElement("beforeBegin",sourceObj);
else if (sourceObj != null && objectObj2 != null) objectObj2.parentNode.insertAdjacentElement("beforeEnd", sourceObj);
sourceObj=null;
objectObj=null;
objectObj2 = null;
beginMoving = false;
}
</script>
</head> <body>
<table border="1" width="40%" bgcolor="#99CCFF" align='left' >
<tr onmouseover='MouseOverFun2(this);' class='removableObj' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="23%">和</td>
<td width="21%">飞过海</td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="23%"> </td>
<td width="21%"> </td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="23%">和1</td>
<td width="21%">飞过海1</td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="23%">A </td>
<td width="21%">B </td>
</tr>
</table> <table border="1" width="40%" bgcolor="#FF9966" >
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="21%">还是</td>
<td width="35%">护身符哈</td>
<td width="21%"> </td>
<td width="23%">呵呵</td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="21%">,</td>
<td width="35%">和是是护</td>
<td width="21%"> </td>
<td width="23%">和</td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="21%">还是1111</td>
<td width="35%">护身符哈sfds</td>
<td width="21%"> fsdafsaf1`</td>
<td width="23%">呵呵32edfdsfdsaf</td>
</tr>
<tr onmouseover="MouseOverFun2(this);" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
<td width="21%">213ewfdsfc,</td>
<td width="35%">和是是护fdsafdsaf</td>
<td width="21%"> fdsafdasf</td>
<td width="23%">和fdsafdds</td>
</tr>
</table> </body>
</html>
现在的问题是怎么样把拖动的行放到停靠行的后面?而不是在最后加一行