<!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 language="javascript">
/*
*className Xdrag
@param obj 被拖动的dom节点
@param box obj被拖动的范围默认为document.body
*/
function Xdrag(obj,box){
var mask=0;//设置监听是否鼠标按下
obj.style.position="absolute";
var Ow=obj.offsetWidth;//获取拖动对象的宽高
var Oh=obj.offsetHeight;
if(!box){
box=document.body;
}
var Bw=box.offsetWidth;//获取拖动容器的宽高
var Bh=box.offsetHeight;
obj.style.position="absolute";
obj.οnmοusedοwn=function(e){
var e=e||window.event;
this.onselectstart=function(){return false;}
var eSrc=e.srcElement||e.target;
mask=1;
XCapture(obj,"start");
Ex=XmouseCoords(e).x-XgetPosition(obj).x;
Ey=XmouseCoords(e).y-XgetPosition(obj).y;
}
document.οnmοusemοve=function(e){
var e=e||window.event;
if(mask==1){
var Ox=XmouseCoords(e).x-Ex;
var Oy=XmouseCoords(e).y-Ey;
if(box){
var Bx=XgetPosition(box).x;
var By=XgetPosition(box).y;
if(Ox<Bx){
Ox=Bx;
}
else if(Ox>Bx+Bw-Ow){
Ox=Bx+Bw+-Ow;
}
if(Oy<By){
Oy=By;
}
else if(Oy>By+Bh-Oh){
Oy=By+Bh-Oh;
}
}
obj.style.left=Ox+"px";
obj.style.top=Oy+"px";
}
}
obj.omouseup==function(e){
maks=0;
XCapture(obj,"end");
}
document.body.οnmοuseup=function(){
mask=0;
XCapture(obj,"end");
}
}
/*获取鼠标位置*/
function XmouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop
};
}
/*设置事件捕获
*function XCapture
@param o, 捕获事件的对象
@param mak,状态 "start" or "end"
*/
function XCapture(o,mak){
if(mak=="start"){
if(o.setCapture){o.setCapture();}
else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}
if(mak=="end"){
if(o.releaseCapture){o.releaseCapture();}
else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}
}
/*获取指定节点的坐标*/
function XgetPosition(e){
var left = 0;
var top = 0;
while(e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e= e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
</script>
</head>
<body οnlοad="Xdrag(mm,kk);"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" width="700" bgcolor="#0099CC" id="kk"><img id="mm" src="2.png" /></td>
</tr>
</table>
</body>
</html>
拖动层
最新推荐文章于 2018-03-26 12:42:56 发布