<!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>
js实现使用鼠标拖动页面元素
猜你喜欢
转载自blog.csdn.net/weixin_42965828/article/details/112629794
今日推荐
周排行