<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖拽原生js</title>
<style>
#box1{
100px;
height: 100px;
background-color: #ffff00;
position: absolute;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("box1");
//onmousedown:鼠标按下 选择元素
//onmousemove:移动元素
//onmouseup:鼠标释放 释放元素
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
//鼠标在div中的左边的的距离=鼠标的横坐标-div的left值
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
//在释放之后，下次操作要全部清空再操作，而不是再move的基础上重复操作
// document.onmousedown=null;
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>