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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
react 组件传值的三种方法
Jun 03 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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代码优化及php相关问题总结
2006/10/09 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP实现的json类实例
2015/07/28 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
python实现redis三种cas事务操作
2017/12/19 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python标准库os库的函数介绍
2020/02/12 Python
大学生会计职业生涯规划范文
2014/02/28 职场文书
小班上学期评语
2014/05/05 职场文书
法人授权委托书
2014/09/16 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python