28 模态框拖动案例

欢迎关注我的微信公众号:CurryCoder的程序人生

1.模态框拖拽案例

  • 模态框也称为弹出框。

  • 功能需求:

    • 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层
    • 点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层
    • 鼠标放到模态框最上面一层,可以按住鼠标拖拽模态框在页面中移动
    • 鼠标松开,可以停止拖到模态框移动
  • 整体思路:

    • 点击弹出层,模态框和遮挡层就会显示出来display:block;
    • 点击关闭按钮,模态框和遮挡层就会隐藏起来display:none;
    // 获取元素
    var login = document.querySelector('.login');
    var mask = document.querySelector('.login-bg');
    var link = document.querySelector('#link');
    var closeBtn = document.querySelector('#closeBtn');
    var title = document.querySelector('#title');
    // 点击弹出层这个链接,让mask和login显示出来
    link.addEventListener('click', function(){
      mask.style.display = 'block';
      login.style.display = 'block';
    });
    // 点击closeBtn关闭按钮,让mask和login隐藏起来
    closeBtn.addEventListener('click', function(){
      mask.style.display = 'none';
      login.style.display = 'none';
    });
    
    • 在页面中的拖拽原理:鼠标按下并且移动,之后鼠标松开
    • 触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup
    • 拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值,这样模态框可以跟着鼠标一起移动
    • 鼠标按下触发的事件源是最上面一行,就是id为title的那个div盒子
    • 鼠标的坐标减去鼠标在盒子内的坐标,才是模态框真正的位置
    • 鼠标按下,就可以得到鼠标在盒子中的坐标
    • 鼠标移动,就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可。注意移动事件写到按下事件里面
    • 鼠标松开,就停止拖拽,可以让鼠标移动事件解除
     // 开始拖拽
     // 当鼠标按下,就获得鼠标在盒子内的坐标
     title.addEventListener('mousedown', function(e){
      var x = e.pageX - login.offsetLeft;  // 每次鼠标按下获得的x是固定值
      var y = e.pageY - login.offsetTop;  // 每次鼠标按下获得的y是固定值
      document.addEventListener('mousemove', move);
        function move(e){
          // 鼠标移动时,把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top
          login.style.left = e.pageX - x + 'px';
            login.style.top = e.pageY - y + 'px';
         }
         // 鼠标弹起,就让鼠标移动事件移动
         document.addEventListener('mouseup', function(){
             document.removeEventListener('mousemove', move);
         })
     });
    

    2.资料下载

    • 笔记及代码,欢迎star,follow,fork......

你可能感兴趣的:(28 模态框拖动案例)