<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wraper{
width:300px;
height:200px;
background-color: red;
text-align: center;
vertical-align:center;
position:absolute;
left:0;
top:0;
}
/*.content{
width:200px;
height:100px;
background-color: green;
}
.box{
width:100px;
height:50px;
background:yellow;
}*/
</style>
</head>
<body>
<div class="wraper">
wraper
<!-- <div class="content">
content
<div class="box">box</div>
</div> -->
</div>
<script>
var div=document.getElementsByTagName('div')[0];
var dix;
var diy;
div.onmousedown=function(e){
//鼠标按下去之获取当前鼠标和元素的坐标
//易错点 ,因为我的css属性是通过嵌入式写入的,只能通过getComputedStyle函数来获取,而且必须是window来调用
//因为该函数获取的样式是带px的字符串,所以必须转换
var x=window.getComputedStyle(div,null).left;
var y=window.getComputedStyle(div,null).top;
var dix=e.pageX-parseInt(x);
var diy=e.pageY-parseInt(y);
console.log(div.style.left);
document.onmousemove=function(event){
var e=event||window.event;
console.log(dix);
//因为left和top是方块的左顶点坐标位置,如果当前鼠标按住的的是方块的中间位置,方块还是会将左顶点往点击的位置移动,所以需要减去当前鼠标位置和方块左顶点之间的坐标差
div.style.left=(e.pageX-dix)+"px";
div.style.top=(e.pageY-diy)+"px";
};
document.onmouseup=function(){
document.onmousemove=null;//鼠标抬起后,让其移动事件失效
};
};
</script>
</body>
</html>