console
window.onload=function (ev) {
var oDiv = document.getElementById("div")
oDiv.onmousedown = function(event){
var event = event || window.event;
var diffX = event.clientX - oDiv.offsetLeft;
var diffY = event.clientY - oDiv.offsetTop;
if(typeof oDiv.setCapture !== 'undefined'){
oDiv.setCapture();
}
document.onmousemove = function(event){
var event = event || window.event;
var moveX = event.clientX - diffX;
var moveY = event.clientY - diffY;
if(moveX < 0){
moveX = 0
}else if(moveX > window.innerWidth - oDiv.offsetWidth){
moveX = window.innerWidth - oDiv.offsetWidth
}
if(moveY < 0){
moveY = 0
}else if(moveY > window.innerHeight - oDiv.offsetHeight){
moveY = window.innerHeight - oDiv.offsetHeight
}
oDiv.style.left = moveX + 'px';
oDiv.style.top = moveY + 'px'
}
document.onmouseup = function(event){
this.onmousemove = null;
this.onmouseup = null;
if(typeof oDiv.releaseCapture!='undefined'){
oDiv.releaseCapture();
}
}
}
}
<div id="div" class="box">点击我拖动</div>
.box {
width: 100px;
height: 100px;
background: #ffb72e;
border-radius: 50%;
position: absolute;
text-align: center;
line-height: 100px;
user-select: none;
}