原生js实现拖拽功能基本思路详解


Posted in Javascript onApril 18, 2018

如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。

1.onmousedown:鼠标按下事件
2.onmousemove:鼠标移动事件
3.onmouseup:鼠标抬起事件

  拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

基本思路如下:

拖拽状态 = 0鼠标在元素上按下的时候{   
  拖拽状态 = 1   
  记录下鼠标的x和y坐标   
  记录下元素的x和y坐标   
  }  
 鼠标在元素上移动的时候{   
  如果拖拽状态是0就什么也不做。   
  如果拖拽状态是1,那么   
  元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标在任何时候放开的时候{   
  拖拽状态 = 0   
}

部分实例代码:

HTML部分

<div class="calculator" id="drag">**********</div>

CSS部分

calculator { 
  position: absolute; /*设置绝对定位,脱离文档流,便于拖拽*/ 
  display: block; 
  width: 218px; 
  height: 280px; 
  cursor: move;  /*鼠标呈拖拽状*/ 
}

JS部分

window.onload = function() { 
  //拖拽功能(主要是触发三个事件:onmousedown\onmousemove\onmouseup) 
  var drag = document.getElementById('drag'); 
  //点击某物体时,用drag对象即可,move和up是全局区域,也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动) 
  drag.onmousedown = function(e) { 
    var e = e || window.event; //兼容ie浏览器 
    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 
    var diffY = e.clientY - drag.offsetTop; 
    /*低版本ie bug:物体被拖出浏览器可是窗口外部时,还会出现滚动条, 
      解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法, 
      可以让鼠标滑动到浏览器外部也可以捕获到事件,而我们的bug就是当鼠标移出浏览器的时候, 
      限制超过的功能就失效了。用这个方法,即可解决这个问题。注:这两个方法用于onmousedown和onmouseup中*/ 
      if(typeof drag.setCapture!='undefined'){ 
        drag.setCapture(); 
      } 
    document.onmousemove = function(e) { 
      var e = e || window.event; //兼容ie浏览器 
      var left=e.clientX-diffX; 
      var top=e.clientY-diffY; 
      //控制拖拽物体的范围只能在浏览器视窗内,不允许出现滚动条 
      if(left<0){ 
        left=0; 
      }else if(left >window.innerWidth-drag.offsetWidth){ 
        left = window.innerWidth-drag.offsetWidth; 
      } 
      if(top<0){ 
        top=0; 
      }else if(top >window.innerHeight-drag.offsetHeight){ 
        top = window.innerHeight-drag.offsetHeight; 
      } 
      //移动时重新得到物体的距离,解决拖动时出现晃动的现象 
      drag.style.left = left+ 'px'; 
      drag.style.top = top + 'px'; 
    }; 
    document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动 
      this.onmousemove = null; 
      this.onmouseup = null; //预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动) 
      //修复低版本ie bug 
      if(typeof drag.releaseCapture!='undefined'){ 
        drag.releaseCapture(); 
      } 
    }; 
  }; 
};

总结

以上所述是小编给大家介绍的原生js实现拖拽功能基本思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
js实现简单五子棋游戏
May 28 Javascript
React Native项目框架搭建的一些心得体会
May 28 Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 #Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 #Javascript
JS实现的base64加密解密操作示例
Apr 18 #Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 #Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 #Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
ADODB类使用
2006/11/25 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python实现画出e指数函数的图像
2019/11/21 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python入门之基础语法学习笔记
2020/02/08 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
介绍一下write命令
2014/08/10 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
小学二年级评语
2014/04/21 职场文书
英文投诉信格式
2015/07/03 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电