首先得了解
**event**里有些什么
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角
pageX：参照点也是浏览器内容区域的左上角
通过两个鼠标点击事件
onmousedown //点击事件
onmousemove //移动事件
onmouseup //鼠标抬起事件
话不多说 直接上代码
var btn = document.getElementById("btn");
function btnn(){
btn.nextElementSibling.classList.toggle("odiv")
onc();
}
function onc(){
var box = document.getElementsByClassName("odiv")[0];
box.onmousedown=function(v){
var event= event || v;
if(event.button == 0)
{
var x=event.pageX||event.clientX;
var y=event.pageY||event.clientY;
var offx=box.offsetLeft;
var offy=box.offsetTop;
document.onmousemove = function(ev)
{
var event= event || ev;
var pax=event.pageX || event.clientX;
var pay=event.pageY || event.clientY;
box.style.left=(pax-x)+offx+"px";
box.style.top=(pay-y)+offy+"px";
box.style.cursor="move";
}
}
}
document.onmouseup=function(){
document.onmousemove = null;
}
}
前端代码如下：
<head>
<style>
.odiv{
width: 100px;
height: 100px;
background: red;
position: relative; //此类型一定得加上
}
</style>
</head>
<body>
<button id="btn" onclick="btnn()">打开</button>
<div id="ww" class=""></div>
大佬勿喷
