学习要点:
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;
}
网友评论