<!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>Dragme</title>
<style>
.glow{background-color:#ff7300;cursor:move;border:1px outset #999}
</style>
</head>
<body>
<div style="position:absolute;left:100px;top:100px; background-color:#f6f6f6;border:1px solid #ccc;">
<div style=" background-color:#ccc;border-bottom:dotted #000;padding:3px;font-weight:bold;" onmouseover="this.style.cursor='move';"onmousedown="beginDrag(this.parentNode,event);">
Drag Me just Drag me pls
</div>
<p>this a test testing testing<p>test<p>test<p>test
</div>
</body>
</html>
<script language="javascript">
function beginDrag(elementToDrag,event){
elementToDrag.className="glow";
//计算指针与left/top差值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
document.attachEvent("onmousemove",moveHandler);//onmousemove
document.attachEvent("onmouseup",upHandler);//onmouseup
}
function moveHandler(e){
if(!e)e=window.event;
//通过差值按比例定位层
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
}
function upHandler(e){
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else if(document.detachEvent){
document.detachEvent("onmouseup",upHandler) ;
document.detachEvent("onmousemove",moveHandler);
}
}
}
</script>
posted on 2006-04-03 14:49
汪杰 阅读(230)
评论(0) 编辑 收藏 引用 所属分类:
hengxing网站js