简单实现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中显示隐藏的实现代码分析
Jul 26 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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跨站刷票的实现代码
2013/06/18 PHP
php邮件发送的两种方式
2020/04/28 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python将unicode转为str的方法
2017/06/21 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
员工培训邀请函
2014/01/11 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
学校校庆演讲稿
2014/05/22 职场文书
运动会拉拉队口号
2014/06/09 职场文书
介绍信模板
2015/01/31 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python