js仿百度登录页实现拖动窗口效果


Posted in Javascript onMarch 11, 2016

在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动;那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了;首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下、移动、松开;在这三个事件里分别计算元素鼠标的位置即可;

复制代码

/*******
   拖拽原理1:
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1, 那么
      元素y = 现在鼠标y - 原来鼠标y + 原来元素y
      元素x = 现在鼠标x - 原来鼠标x + 原来元素x
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/
上面这个原理也可以演变为:
/*******
   拖拽原理2:
   拖拽状态 = 0 
   鼠标在元素上按下的时候 {
      拖拽状态 = 1
      记录下鼠标的x和y坐标
      记录下元素的x和y坐标
      元素的偏移值X=元素的X-元素的offsetLeft
      元素的偏移值Y=元素的Y-元素的offsetTop
   }
   鼠标在元素上移动的时候 {
      如果拖拽状态是0就什么也不做。
      如果拖拽状态是1, 那么
      元素y = 现在鼠标y -元素的偏移值X
      元素x = 现在鼠标x -元素的偏移值Y
   }
   鼠标在任何时候放开的时候 {
      拖拽状态 = 0
   }
   将以上思路翻译成JS代码就可以实现拖拽的效果了。
*******/

上面两种思路其实是异曲同工,需要注意的是在移动事件里,还要处理元素边缘的位置,以防止元素被拖动的时候拖到浏览器以外的地方;直接来看代码:
代码一:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
    }

    function move(event) {
      if (isDown == true) {
        var x = parseInt(mousePosition(event).x - posX + ObjLeft);
        var y = parseInt(mousePosition(event).y - posY + ObjTop);
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        if (x < 0) {
          x = 0
        } else if (x > w) {
          x = w
        };
        if (y < 0) {
          y = 0
        }else if (y > h) {
          y= h
        };

        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代码二:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>JS拖拽</title>
  <style>
  *{padding: 0; margin: 0; }
  .box{width: 100px;height: 100px;background: blue;position: absolute; }
  </style>
  <script>
    var isDown = false;
    var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
    window.onload = function() {
      obj = document.getElementById('box');
      obj.onmousedown = down;
      document.onmousemove = move;
      document.onmouseup = up;
    }

    function down(event) {
      obj.style.cursor = "move";
      isDown = true;
      ObjLeft = obj.offsetLeft;
      ObjTop = obj.offsetTop;
      posX = parseInt(mousePosition(event).x);
      posY = parseInt(mousePosition(event).y);
      offsetX=posX-ObjLeft;
      offsetY=posY-ObjTop;
    }

    function move(event) {
      if (isDown == true) {
        var x=mousePosition(event).x-offsetX
        var y=mousePosition(event).y-offsetY
        var w = document.documentElement.clientWidth - obj.offsetWidth;
        var h = document.documentElement.clientHeight - obj.offsetHeight;
        console.log(x + ',' + y);
        x=Math.min(w,Math.max(0,x));
        y=Math.min(h,Math.max(0,y));
        obj.style.left = x + 'px';
        obj.style.top = y + 'px';
      }
    }

    function up() {
      isDown = false;
    }
    
    function mousePosition(evt) {
      var xPos, yPos;
      evt = evt || window.event;
      if (evt.pageX) {
        xPos = evt.pageX;
        yPos = evt.pageY;
      } else {
        xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
      }
      return {
        x: xPos,
        y: yPos
      }
    }
  </script>
</head>
<body>
  <div id="box" class="box"></div>
</body>
</html>

代码一对应原理一,代码二对应原理二,效果都是一样的,只不过原理二是在原理一的基础上演变过来的,演变之后,元素拖动的边缘处理也相应的做了变化。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 #Javascript
Angularjs中使用Filters详解
Mar 11 #Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 #Javascript
You might like
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript错误处理
2015/02/03 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Vue组件开发初探
2017/02/14 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python按钮的响应事件详解
2019/03/04 Python
利用Python实现kNN算法的代码
2019/08/16 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
中学生团员自我评价分享
2013/12/07 职场文书
暑期社会实践感言
2014/02/25 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS