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 相关文章推荐
js日期联动示例
May 02 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
微信小程序实现列表左右滑动
Nov 19 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实现设计模式中的单例模式详解
2014/10/11 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JS验证字符串功能
2017/02/22 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
基于python绘制科赫雪花
2018/06/22 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
师范生个人推荐信
2013/11/29 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
集体备课反思
2014/02/12 职场文书
三查三看党性分析材料
2014/02/18 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
爬山的活动方案
2014/08/16 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS