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 DIV弹出效果实现代码
Jul 03 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JavaScript实现简单日历效果
Sep 11 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学习笔记之二 php入门知识
2011/01/12 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
JS 继承实例分析
2008/11/04 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python FFT合成波形的实例
2019/12/04 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
颐和园英文导游词
2015/01/30 职场文书
高中班主任心得体会
2016/01/07 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS