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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Javascript----文件操作
2007/01/18 Javascript
JS Array对象入门分析
2008/10/30 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
python中遍历文件的3个方法
2014/09/02 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python控制Firefox方法总结
2019/06/03 Python
Python列表的切片实例讲解
2019/08/20 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
怎样写留学自荐信
2013/11/11 职场文书
土木工程师岗位职责
2013/11/24 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
高中军训感言400字
2014/02/24 职场文书
优乐美广告词
2014/03/14 职场文书
个人典型事迹材料
2014/12/30 职场文书