原生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 相关文章推荐
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
第一篇初识bootstrap
Jun 21 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
js实现防止被iframe的方法
2015/07/03 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
实习生自我鉴定
2013/12/12 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
个人职业及收入证明
2014/10/13 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Mysql 一主多从的部署
2022/05/20 MySQL