简单实现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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
jquery 手势密码插件
Mar 17 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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/12/02 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php 错误处理经验分享
2011/10/11 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP实现的简单缓存类
2015/07/29 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
总监职责范文
2013/11/09 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
求职简历自我评价2015
2015/03/10 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Python OpenGL基本配置方式
2022/05/20 Python