类似google个性化主页的拖动效果，只要用JavaScript就能实现，实现拖动效果无需数据交换时与Ajax无关。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> skycper javascript div</TITLE><META NAME="Author" CONTENT="skycper">
<SCRIPT LANGUAGE="JavaScript">
<!--var activeDiv,activeSpan,beforeDiv;
function active(e){if(e.tagName=="SPAN"){if(!activeDiv) return;activeSpan = e;if(activeDiv.srcElement.parentNode!=e)before(e.lastChild);return;
}activeDiv = e.cloneNode(true);document.body.insertBefore(activeDiv);with(activeDiv.style){position="absolute";backgroundColor="yellow";filter="alpha(opacity=50)";left=event.x-20;top=event.y+2;}activeDiv.srcElement=e;activeDiv.onmousedown=null;activeDiv.onmousemove=null;}function releaseDiv(){if(!activeDiv) return;document.body.removeChild(activeDiv)var se = activeDiv.srcElement;var p = se.parentNode;activeDiv=null;}function moveDiv(){if(!activeDiv) return;with(activeDiv.style){left=event.x-20;top=event.y+2;}}function before(e){if(!activeDiv || e.nextSibling==activeDiv)return;if(e!=activeDiv.srcElement)if(e.nextSibling&&e.nextSibling.parentNode==e.parentNode&&e.nextSibling!=e.parentNode.lastChild)e.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement),e.nextSibling)elsee.parentNode.insertBefore(activeDiv.srcElement.parentNode.removeChild(activeDiv.srcElement))}var aaa=new Array(21);
//--></SCRIPT></HEAD><BODY onmouseup="releaseDiv()" onmousemove="moveDiv()" onselectstart="return false"><span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)"><SCRIPT>//自动生成假数据for(var i=0;i<10;i++) document.write("<div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#99FFFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(i)+"</span></div>")</SCRIPT></span><span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)"><SCRIPT>//自动生成假数据for(var i=97;i<123;i++) document.write("<div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFFFCC\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")</SCRIPT></span><span style="width:30%;height:100%;border:1px solid gray;overflow-y:auto" onmousemove="active(this)"><SCRIPT>//自动生成假数据for(var i=65;i<91;i++) document.write("<div style=\"cursor:hand;border:1px solid #CCFFFF;background-color:#FFCCFF\" onmousedown=\"active(this)\" onmousemove=\"before(this)\"><span style=\"width:100\">"+aaa.join(String.fromCharCode(i))+"</span></div>")</SCRIPT></span></BODY></HTML>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。