容易实现可拖动div
简单实现可拖动div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<script>
window.onload=function(){
var d=document.getElementById('div1');
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
d.onmouseup=addE;
function moveHandler(e)
{
if (!e) e=window.event;
d.style.left=e.clientX+'px';
d.style.top=e.clientY+'px';
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function addE()
{
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
}
}
</script>
</head>
<body>
<div id='div1' style='left:80px;top:100px;position:absolute;width:80px;background:#aaaaaa;'>here!</div>
</body>
</html>
主要利用了mousemove和mouseup事件。当然，还要注意事件处理的方式，这里禁用了冒泡。
mousemove:鼠标每移动一个像素，就会触发一次事件。