javascript实现类似google拖动效果
类似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)
else
e.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>
<!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>
