首先创建一个盒子
.box{
width:100px;height:100px;
background: red;
position: absolute;left:0;top:0;
}
<body>
<div class="box"></div>
</body>
接下来是js代码部分
<script>
var obox = document.querySelector(".box");
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var w = obox.offsetWidth;
var h = obox.offsetHeight;
// 行为过程：按下之后，移动，再抬起
obox.addEventListener("mousedown",function(eve){
// 获取按下的坐标，在按下的事件对象身上
var e1 = eve || window.event;
// 为了防止移动过快，鼠标在某一瞬间离开元素，移动事件加给页面
document.addEventListener("mousemove",move)
// 因为移动事件在抬起的时候，被删除，所以提前起名
function move(eve){
var e = eve || window.event;
// 计算元素要移动的真正的距离：为鼠标相对于页面的坐标减去按下时相对于元素的坐标
var l = e.pageX - e1.offsetX;
var t = e.pageY - e1.offsetY;
// 边界限定
if(t < 0){
t = 0
}
if(l < 0){
l = 0
}
if(l > clientW - w){
l = clientW - w;
}
if(t > clientH - h){
t = clientH - h;
}
// 设置位置
obox.style.left = l + "px"
obox.style.top = t + "px"
}
// 抬起时，删除移动，删除抬起
document.addEventListener("mouseup",up)
function up(){
document.removeEventListener("mousemove",move)
document.removeEventListener("mouseup",up)
}
})
</script>