拖拽操作,主要经历三个事件,鼠标按下,移动鼠标,放开鼠标,所以我们代码应该这样写:
// (1) 当我们鼠标按下,
就获得鼠标在盒子内的坐标
title . addEventL istener( ' mousedown',function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去鼠标在盒子内的坐标
document . addEventListener( ' mousemove',move )
function move(e) {
login.style.left = e.pagex - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起,就让鼠标移动事件移除
document . addEventListener( ' mouseup , function() {
document . removeEventListener( ' mousemove',move) ;
})
|