js实现简易拖拽的示例


Posted in Javascript onOctober 26, 2020

简易拖拽

目录

  • 代码实例
  • 代码解析
  • scrollWidth,clientWidth,offsetWidth的区别
  • offsetX,clientX,pageX的辨析
  • 下载源码链接 

代码实例

<div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;"></div>

(function () {
 var dragging = false
 var boxX, boxY, mouseX, mouseY, offsetX, offsetY
 var box = document.getElementById('box')

 // 鼠标按下的动作
 box.onmousedown = down
 // 鼠标的移动动作
 document.onmousemove = move
 // 释放鼠标的动作
 document.onmouseup = up

 // 鼠标按下后的函数,e为事件对象
 function down(e) {
  dragging = true

  // 获取元素所在的坐标
  boxX = box.offsetLeft
  boxY = box.offsetTop

  // 获取鼠标所在的坐标
  mouseX = parseInt(getMouseXY(e).x)
  mouseY = parseInt(getMouseXY(e).y)

  // 鼠标相对元素左和上边缘的坐标
  offsetX = mouseX - boxX
  offsetY = mouseY - boxY
 }

 // 鼠标移动调用的函数
 function move(e){
  if (dragging) {
   // 获取移动后的元素的坐标
   var x = getMouseXY(e).x - offsetX
   var y = getMouseXY(e).y - offsetY

   // 计算可移动位置的大小, 保证元素不会超过可移动范围
   var width = document.documentElement.clientWidth - box.offsetWidth
   var height = document.documentElement.clientHeight - box.offsetHeight

   // min方法保证不会超过右边界,max保证不会超过左边界
   x = Math.min(Math.max(0, x), width)
   y = Math.min(Math.max(0, y), height)

   // 给元素及时定位
   box.style.left = x + 'px'
   box.style.top = y + 'px'
  }
 }

 // 释放鼠标的函数
 function up(e){
  dragging = false
 }

 // 函数用于获取鼠标的位置
 function getMouseXY(e){
  var x = 0, y = 0
  e = e || window.event

  if (e.pageX) {
   x = e.pageX
   y = e.pageY
  } else {
   x = e.clientX + document.body.scrollLeft - document.body.clientLeft
   y = e.clientY + document.body.scrollTop - document.body.clientTop
  }

  return {
   x: x,
   y: y
  }
 }
})()

代码解析

在 document 对象上绑定 mousemove 和 mouseup 事件,不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽,而绑定在 document 上则可以避免这样的事情发生。拖拽再快都不会超出 document 的范围。

// 鼠标按下的动作
box.onmousedown = down
// 鼠标的移动动作
document.onmousemove = move
// 释放鼠标的动作
document.onmouseup = up

HTMLElement.offsetLeft是一个只读属性,返回当前元素左上角相对于HTMLElement.offsetParent 节点的左边界偏移的像素值。

// 获取元素所在的坐标
boxX = box.offsetLeft
boxY = box.offsetTop

一般鼠标的位置使用 pageX / pageY 获取,但是 IE 不支持这两个属性。所以在 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 获取鼠标的位置

if (e.pageX) {
 x = e.pageX
 y = e.pageY
} else {
 x = e.clientX + document.body.scrollLeft - document.body.clientLeft
 y = e.clientY + document.body.scrollTop - document.body.clientTop
}

scrollWidth,clientWidth,offsetWidth的区别

定义

  • scrollWidth:对象的实际内容的宽度,不包括边线宽度 
  • clientWidth:对象内容的可视区的宽度,不包括边线宽度 
  • offsetWidth:对象整体的实际宽度,包括滚动条等边线

情况一

元素内无内容或者内容不超过可视区,滚动不出现或不可用 
scrollWidth = clientWidth 
offsetWidth为元素的实际宽度

情况二

元素的内容超过可视区,滚动条出现和可用 
scrollWidth > clientWidth 
offsetWidth为元素的实际宽度

offsetX,clientX,pageX的辨析

offsetX,offsetY

指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽度计算在内,firefox则不包含边框值

pageX,pageY

指相对文档窗口左上角的距离,不会随滚动条移动

clientX,clientY

指相对于浏览器可视窗口左上角的距离,参照点会随滚动条滚动而移动 

下载源码链接

星辉的Github

以上就是js实现简易拖拽的示例的详细内容,更多关于js实现简易拖拽的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
You might like
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
js实现进度条的方法
2015/02/13 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python读写Excel文件方法介绍
2014/11/22 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python如何读取文件中图片格式
2020/01/13 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
个人简历自我鉴定
2013/10/11 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
五一口号
2014/06/19 职场文书
学校党员干部承诺书
2015/05/04 职场文书
一个都不能少观后感
2015/06/04 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python中request的基本使用解决乱码问题
2022/04/12 Python