div随鼠标拖拽
作者:
薛定谔的程序 | 来源:发表于
2019-12-14 16:37 被阅读0次<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#div{
position: absolute;
width: 150px;
height: 150px;
background: cadetblue;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
//div按下事件
var Div = document.getElementById("div");
Div.onmousedown = function (e) {
// console.log("down");
disX=e.clientX - Div.offsetLeft;//获取鼠标到div left的距离
disY=e.clientY - Div.offsetTop;//获取鼠标到div top的距离
//console.log(disX+' '+disY);
document.onmousemove = function (e) {//处理鼠标滑动过快，脱离div，所以在document上添加事件
//console.log("move");
Div.style.left = e.clientX-disX+'px';//div的left等于鼠标的位置-鼠标到div左边的距离
Div.style.top = e.clientY-disY+'px';
//console.log(e.clientX-disX);
//console.log(e.clientX-disY);
};
document.onmouseup = function () {//处理拖拽时鼠标滑到网址块区域，鼠标回来时div依旧跟随鼠标，事件也加在document上，超出document就停止
// console.log("up");
//document.onmousedown = null;//去除点击事件
document.onmousemove = null;//去除移动事件，否则会“沾”在鼠标上
};
return false//在火狐老版本上会有浏览器bug会造成第二次以后拖拽产生重影，去除默认事件，可以去除浏览器影响。
};
</script>
</body>
</html>
本文标题：div随鼠标拖拽
本文链接：https://www.haomeiwen.com/subject/lrzcnctx.html
网友评论