div {
position: relative;
width: 200px;
height: 200px;
background-color: aqua;
cursor: move;
}
一定要给盒子加定位
var div = document.querySelector('div');
div.addEventListener('mousedown', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//移动的时候,把鼠标在页面中的坐标,减去鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
div.style.left = e.pageX - x + 'px';
div.style.top = e.pageY - y + 'px';
}
//鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})