[基于vue的ui框架]基于JavaScript实现窗口拖动效果的教程

时间:2021-05-28  来源:窗口特效  阅读:

写法类似于上一篇,水平进度条拖拽,具体内容如下

 

 代码如下

  

  Document

   

  注册信息

  

    我是窗口标题,可拖着我走

    我是窗口内容

  

  <script> 

    var popupfather = document.getElementById('popupfather');

    var popupson = document.getElementById('popupson');

 

    popupson.onmousedown = function(event){

      var event = event || window.event;

      var that = this;

      var x = event.clientX - popupfather.offsetLeft - 150; //当前鼠标点击处相对于popupfather所在位置x , -150 是处理margin值

      var y = event.clientY - popupfather.offsetTop - 150; //当前鼠标点击处相对于popupfather所在位置y

      document.onmousemove = function(event){

        var event = event || window.event;

        popupfather.style.left = event.clientX - x + "px";

        popupfather.style.top = event.clientY- y + "px";

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

 

      }

    }

    document.onmouseup = function(){

      document.onmousemove = null;

    }

  </script>

 

效果图:

[基于vue的ui框架]基于JavaScript实现窗口拖动效果的教程

http://m.bbyears.com/wangyetexiao/120318.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新