8.项目 1-博客前端：封装库--拖拽[上]

学习要点：

1.界面设计
2.设置效果

本节课，我们需要对弹窗的窗口实现拖拽功能，这节课的我们分两个部分，上集我们只
探讨讲窗口实现拖拽即可，下集我们讲修缮拖拽，让他的兼容性和缺陷进行修补。

一．界面设计

界面中的弹窗窗口可以拖到上面。

QQ截图20190513095040.png

二．设置效果

由于我们弹窗的遮罩我们采用了 clientWidth 和 clientHeight，导致如果有滚动条，拖出
的部分就会出现空白。我们可以尝试使用 offset 或者 scroll 获取实际或者滚动条区域的内容
进行遮罩，或者直接弹窗后直接去掉滚动条，禁止拖动即可。

document.documentElement.style.overflow = 'hidden'; //禁止滚动条
document.documentElement.style.overflow = 'auto'; //还原默认滚动条状态

如果要设置物体拖拽，那么必须使用三个事件：mousedown、mousemove、mouseup 这三个。

//拖拽事件
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmousedown = function (e) {
var e = getEvent(e);
var _this = this;
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
document.onmousemove = function (e) {
var e = getEvent(e);
_this.style.left = e.clientX - diffX + 'px';
_this.style.top = e.clientY - diffY + 'px';
}
document.onmouseup = function () {
this.onmousemove = null;
this.onmouseup = null;
}
};
}
return this;

//获取 event 对象
function getEvent(event) {
return event || window.event;
}

感谢收看本次教程！