javascript实现拖拽
2011-09-01 16:44:08
194
<!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>
<div style="width:100px;height:100px;background-color:#F00;position:absolute;left:20px;top:20px;" id='div1'></div>
</body>
</html>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
/*以下为绑定事件函数*/
function bind(ele,eventType,fn)
{
if(ele.addEventListener)
{
ele.addEventListener(eventType,fn,false)
}
else if(ele.attachEvent)
{
ele.attachEvent('on'+eventType,fn)
}
else
{
ele[eventType]=fn
}
}
/*以下为移除绑定事件函数
使用DOM2事件绑定方式
*/
function removeEvent(ele,eventType,fn)
{
if(ele.removeEventListener)//标准浏览器
{
ele.removeEventListener(eventType,fn,false)
}
else if(ele.detachEvent)//IE6,7,8
{
ele.detachEvent('on'+eventType,fn)
}
else
{
ele[eventType]=null
}
}
/*以下为拖拽*/
function drag(e)
{
var nWidth=document.documentElement.clientWidth||document.body.clientWidth;//获得浏览器的宽
var nHeight=document.documentElement.clientHeight||document.body.clientHeight; //获得浏览器的高
var boxPos={x:oDiv.offsetLeft,y:oDiv.offsetTop}//设一个保存这个盒子（DIV）原始位置的变量（对象类型）
var e=e||window.event;
var oMousePos={x:e.clientX,y:e.clientY}
if(oDiv.setCapture)//IE的特性，用来使这个元素不丢掉对鼠标的捕捉
oDiv.setCapture();
function move(Event)
{
var Event=Event||window.event;
var x=Event.clientX;
var y=Event.clientY;
//下面的这些判断，是为了让这个拖拽不出浏览器这个范围
if(boxPos.x+(x-oMousePos.x)>=nWidth-oDiv.offsetWidth)
{
oDiv.style.left=nWidth-oDiv.offsetWidth+'px'
}
else if(boxPos.x+(x-oMousePos.x)<=0)
{
oDiv.style.left=0
}
else if(boxPos.y+(y-oMousePos.y)>=nHeight-oDiv.offsetHeight)
{
oDiv.style.top=nHeight-oDiv.offsetHeight+'px'
}
else if(boxPos.y+(y-oMousePos.y)<=0)
{
oDiv.style.top=0
}
else
{
oDiv.style.left=boxPos.x+(x-oMousePos.x)+"px"
oDiv.style.top=boxPos.y+(y-oMousePos.y)+"px"
}
}
bind(document,'mousemove',move);//把move方法，绑定到document的onmousemove这个事件上
//当鼠标抬起来的时间，把move方法在onmousemove事件上移除并使此元素释放对鼠标的捕捉（仅对IE）
bind(document,'mouseup',function(){removeEvent(document,'mousemove',move);if(oDiv.releaseCapture )
oDiv.releaseCapture()})
}
bind(oDiv,'mousedown',drag);
</script>
