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中val()表单取值赋值的实例代码
Aug 15 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php define的第二个参数使用方法
2013/11/04 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Django自定义manage命令实例代码
2018/02/11 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
回门宴父母答谢词
2014/01/26 职场文书
酒鬼酒广告词
2014/03/21 职场文书
企业活动策划方案
2014/06/02 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Redis基本数据类型String常用操作命令
2022/06/01 Redis