<!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=gb2312" />
<title>通用随机拖动层</title>
<script type="text/javascript">
<!--
//W3C标准获取ID
function getId(objId){
return document.getElementById(objId)
}
//载入页面时触发事件
window.onload = function(){
//鼠标点下时触发函数disrow(a),a为配合NN事件
getId("clear").onmousedown = function(a){disrow(a)}
}
//声明触发对象的最上层table,IE下可以不用，NN必须要有事件触发对象
//依次为TABLE的宽，高，左边和上边到上层BODY距离，newObj防止鼠标事件溢出
var rowWid,rowHig,rowLef,rowTop,newObj = false
//抓取层初始化函数，a为NN传入事件子对象
function disrow(a){
//如果newObj对象不成立就执行，防止鼠标事件溢出
if(!newObj){
//声明实践父对象，NN必须
var obj = getId("clear")
//得到TABLE的宽，高，左边和上边到上层BODY距离
rowWid = obj.offsetWidth
rowHig = obj.offsetHeight
rowLef = obj.offsetLeft
rowTop = obj.offsetTop
//分辨IE和NN的事件方法
if(!a)a = window.event;
//分辨IE和NN的事件方法，得到鼠标坐标所在对象
var attr = a.target?a.target:a.srcElement
//得到鼠标坐标所在对象的内容，宽度，高度，到BODY的左边和上边距离，背景色，或者其他
var attrValue = attr.childNodes[0].nodeValue
var attrWid = attr.offsetWidth
var attrHig = attr.offsetHeight
var attrLef = rowLef + attr.offsetLeft
var attrTop = rowTop + attr.offsetTop
var attrBGC = attr.style.backgroundColor
//建立要复制出的新对象CSS样式
var newStyle = "width:"+attrWid+"px;height:"+attrHig+"px;border:1px solid #333;position:absolute;top:"+attrTop+"px;left:"+attrLef+"px;background-color:"+attrBGC+";z-index: 2;cursor:move;"
//建立一个新对象标签
newObj = document.createElement("div")
//设置新对象内容（复制鼠标所在坐标对象内容）
newObj.appendChild(document.createTextNode(attrValue))
//设置新对象ID，IE是属性名在后，属性值在前，NN相反，所以将ID和ID名建成一样
newObj.setAttribute("id","id")
//使用建立的新对象样式，并给新对象赋上样式
newObj.style.cssText = newStyle
//在document.body中将新对象呈现，IE必须
document.body.appendChild(newObj)
//开始执行拖动任务
drag()
}
}
//拖动函数
function drag(){
var obj = getId("id")
//鼠标按下时触发动作
getId("clear").firstChild.onmousedown = function(a){return false}
document.onmousedown = function(a){
//如果newObj对象不成立就执行，防止鼠标事件溢出造成IE假死
if(newObj){
//分辨IE和NN的事件方法
if(!a)a = window.event;
//得到鼠标点击时，鼠标的浏览器坐标
if(!a.pageX)a.pageX = a.clientX;
if(!a.pageY)a.pageY = a.clientY;
//计算鼠标点击时，所在对象的内部X，Y坐标
var inObjX = a.pageX-parseInt(obj.style.left)
var inObjY = a.pageY-parseInt(obj.style.top)
//事件触发动作开始，判断IE，NN，使用不同方法
if(obj.setCapture){
//IE触发事件开始
obj.setCapture();
}else if(window.captureEvents){
//NN触发事件开始
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//鼠标移动时触发动作
document.onmousemove = function(a){
//分辨IE和NN的事件方法
if(!a)a = window.event;
//这里和上面不同，因为事件动作触发后，下面的鼠标值跟随鼠标的移动而变化
if(!a.pageX)a.pageX = a.clientX;
if(!a.pageY)a.pageY = a.clientY;
//实时计算鼠标拖动对象的坐标，让对象跟随鼠标移动，inObjX，inObjY为了精确鼠标固定拖动对象
obj.style.left = a.pageX-inObjX+"px";
obj.style.top = a.pageY-inObjY+"px";
}
//鼠标松开时触发动作
document.onmouseup = function(a){
//事件触发动作开始，判断IE，NN，使用不同方法
if(obj.releaseCapture){
//IE触发事件结束
obj.releaseCapture();
}else if(window.captureEvents){
//NN触发事件结束（这2个结束为必须，否则会陷入死循环，造成浏览器崩溃）
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//这里可以防置你想要的功能，我这里用的是删除newObj新建对象
newObj.parentNode.removeChild(newObj);
//释放newObj，继续下次事件时使用，否则会造成错误
newObj = false
//释放鼠标动作
document.onmousemove = null;
document.onmouseup = null;
}
}
//释放鼠标点击动作，NN必须，否则会造成鼠标拖动全选
return false
}
}
// -->
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
line-height: 21px;
font-size: 9pt;
}
#clear{
background-color: #FFF;
}
#drag{
width:100px;
height:20px;
border:1px solid #333;
position:absolute;
top:37px;
left:2px;
text-align:center;
cursor:move;
background-color: #EEE;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="drag">收藏窗口</div>
<table width="500" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" id="clear">
<tr>
<td style="background-color:#FFD9BF;cursor:move;">http://www.cnrui.cn/blog</td>
<td style="background-color:#BF8660;cursor:move;">胡东平</td>
<td style="background-color:#FFF0E6;cursor:move;">个人空间</td>
<td style="background-color:#FFB380;cursor:move;">欢迎访问</td>
<td style="background-color:#FFBFBF;cursor:move;">转载注明</td>
</tr>
<tr>
<td colspan="5">http://www.cnrui.cn/blog</td>
</tr>
<tr>
<td colspan="5">胡东平</td>
</tr>
<tr>
<td colspan="5">个人空间</td>
</tr>
<tr>
<td colspan="5">欢迎访问</td>
</tr>
<tr>
<td colspan="5">转载注明</td>
</tr>
<tr>
<td colspan="5">谢谢</td>
</tr>
<tr>
<td colspan="5">ergergrege</td>
</tr>
<tr>
<td colspan="5">gerger</td>
</tr>
<tr>
<td colspan="5">gergerher</td>
</tr>
</table>
</body>
</html>