vue实现拖拽的简单案例 不超出可视区域


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了vue实现拖拽x效果的具体代码,供大家参考,具体内容如下

实现拖拽之前,先了解几个小常识:

这两种获取鼠标坐标的方法,区别在于基于的对象不同:

  • pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变;
  • clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变;

1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
2.clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
3.offsetWidth: 用来获取当前拖拽元素 自身的宽度
4.offsetHeight:用来获取当前拖拽元素 自身的高度 
5.document.documentElement.clientHeight :屏幕的可视高度
6.document.documentElement.clientWidth:屏幕的可视高度

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue实现拖拽</title>
 <script src="./js/vue.min.js"></script>
 </head>
 <style>
 *{margin: 0;padding:0;}
  #app{
   position: relative;  /*定位*/
   top: 10px;
   left: 10px;
   width: 80px;
   height: 80px;
   background: #666;  /*设置一下背景*/
  }
 </style>
 <body>
 <div id="app" @mousedown="move">
 {{positionX}}
 {{positionY}}
 </div>
 </body>
<script>
 var vm = new Vue({
 el: "#app",
 data: {
 positionX: 0,
 positionY: 0
 },
 methods: {
 move(e){
 let odiv = e.target;// 获取目标元素
 
 //计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置,OffsetLeft是元素相对于外层元素的位置
 let x = e.clientX - odiv.offsetLeft;
 let y = e.clientY - odiv.offsetTop;
 console.log(odiv.offsetLeft,odiv.offsetTop)
 document.onmousemove = (e) => {
  // 获取拖拽元素的位置
  let left = e.clientX - x;
  let top = e.clientY - y;
  this.positionX = left;
  this.positionY = top;
  //console.log(document.documentElement.clientHeight,odiv.offsetHeight)
  // 把拖拽元素 放到 当前的位置
  if (left <= 0) {
  left = 0;
  } else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
  //document.documentElement.clientWidth 屏幕的可视宽度
  left = document.documentElement.clientWidth - odiv.offsetWidth;
  }
  
  if (top <= 0) {
  top = 0;
  } else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
  // document.documentElement.clientHeight 屏幕的可视高度
  top = document.documentElement.clientHeight - odiv.offsetHeight
  
  }
  odiv.style.left = left + "px";
  odiv.style.top = top + "px"
  
 }
    // 为了防止 火狐浏览器 拖拽阴影问题
 document.onmouseup = (e) => {
  document.onmousemove = null;
    document.onmouseup = null
 }
 }
 }
 })
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
javascript事件冒泡实例分析
May 13 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python异步任务队列示例
2014/04/01 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
综合办公室主任职责
2013/12/16 职场文书
社团成立邀请函
2014/01/08 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
小学运动会班级口号
2014/06/09 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
践行三严三实心得体会
2014/10/13 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
介绍信格式
2015/01/30 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python