美文网首页
8.项目 1-博客前端:封装库--拖拽[上]

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

作者: 好像在哪见过你丶 | 来源:发表于2019-05-13 09:52 被阅读0次

    学习要点:

    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;
    }
    

    感谢收看本次教程!

    相关文章

      网友评论

          本文标题:8.项目 1-博客前端:封装库--拖拽[上]

          本文链接:https://www.haomeiwen.com/subject/cknkaqtx.html