<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖动元素</title>
<link rel="icon" href="../../7952/h1.ico">
<script type="text/javascript" src="../../0js/tool.js"></script>
</head>
<body>
<script type="text/javascript">
(function () {
var div = createDiv(0,0,100,100);
document.body.appendChild(div);
div.onmousedown=function (e) {
e=e||window.event;
//当鼠标按下时,得到鼠标距离元素的左上角的距离
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove=function (ev) {
ev=ev||window.event;
//当鼠标移动时,得到鼠标距离当前窗口的左上角的距离
var clientX = ev.clientX;
var clientY = ev.clientY;
//元素的位置是鼠标距离窗口左上角的位置减去鼠标距离元素左上角的距离,
//若在此处想用this,则鼠标移动事件应该绑定在div上,而不能绑定document上
div.style.left=clientX-offsetX+'px';
div.style.top=clientY-offsetY+'px';
}
}
div.onmouseup=function () {
document.onmousemove=null;
}
})();
</script>
</body>
</html>
11-11
4972
4972
10-17
6859
6859
08-30
161
161
11-11
3219
3219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
