简单实现js拖拽效果


Posted in Javascript onJuly 25, 2017

本文实例为大家分享了js拖拽效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    html,body{
      width:100%;
      height:100%;
    }
    #box{
      position:absolute;
      top:50%;
      left:50%;
      width:200px;
      height:200px;
      background:#ff6600;
      margin:-100px 0 0 -100px;
      cursor:move;
      /*
        不知道宽高的情况下的居中
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
      */  
    }
  </style>
</head>
<body>
  <div id='box'>
    
  </div>
  <script>
    //JS实现让当前的元素在屏幕居中的位置
    var box = document.getElementById('box');
    // box.style.top = ((document.documentElement.clientHeight || document.body.clientHeight)-box.offsetHeight)/2 + "px";

    // box.style.left = ((document.documentElement.clientWidth || document.body.clientWidth)-box.offsetWidth)/2 + "px";
    //拖拽的原理
    /*
      当鼠标在盒子上按下的时候,我们开始拖拽(给盒子绑定onmousemove和onmouseup),当鼠标移动的时候,我们计算盒子的最新位置
      当鼠标抬起的时候说明拖拽结束了,我们的move和up就没用了,我们再把这两个方法移除
    */
    box.onmousedown = down;
    function down(e){
      e = e || window.event;
      //记录开始位置的信息
      this["strX"] = e.clientX;
      this["strY"] = e.clientY;
      this["strL"] = parseFloat(this.style.left);
      this["strT"] = parseFloat(this.style.top);
      //给元素绑定移动和抬起的事件
      if(this.setCapture){
        this.setCapture()//把当前的鼠标和this绑定在一起
        this.onmousemove = move;
        this.onmouseup= up;
      }else{
        var _this = this;
        document.onmousemove = function(e){
          // move(e)//这个里面的this是window
          move.call(_this,e);
        }
          ;
        document.onmouseup= function(e){
          up.call(_this,e);
        };
      }
      
    }
    function move(e){
      e = e || window.event;
      var curL = (e.clientX-this["strX"])+this["strL"];
      var curT = (e.clientY-this["strY"])+this["strT"];
      //边界判断
      var minL = 0,minT = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
      curL = curL < minL ? minL :(curL > maxL ? maxL : curL);
      curT = curT < minT ? minT :(curT > maxT ? maxT : curT)
      this.style.left = curL + "px";
      this.style.top = curT + "px";
    }
    function up(e){
      if(this.releaseCapture){
        this.releaseCapture();//把当前的鼠标和盒子解除绑定
        this.onmousemove = null;
        this.onmouseup= null;
      }else{
        document.onmousemove = null;
        document.onmouseup= null;
        //这样绑定的话,move和up绑定的this都是document
      }
      
    }
    //当鼠标移动过快的时候,我们的鼠标会脱离盒子,导致盒子的mousemove和mouseup事件都移除不到->"鼠标焦点丢失"
    //在IE和火狐浏览器中,我们用一个方法把盒子和鼠标绑定在一起即可。
    //鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给document
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery下判断Id是否存在的代码
Jan 06 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JS匿名函数实例分析
Nov 26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 #Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 #Javascript
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
十个Python程序员易犯的错误
2015/12/15 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python 备份程序代码实现
2017/03/06 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
大学生求职自我评价
2014/01/16 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android