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 面向对象的 私有成员和公开成员
May 13 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
jQuery手风琴的简单制作
May 12 jQuery
微信小程序 空白页重定向解决办法
Jun 27 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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函数utf8转gb2312编码
2006/12/21 PHP
php smarty函数扩展
2010/03/15 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
python 矩阵增加一行或一列的实例
2018/04/04 Python
详解Python打包分发工具setuptools
2019/08/05 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
药学专业个人自我评价
2013/11/11 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
九年级家长会邀请函
2014/01/15 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
python开发实时可视化仪表盘的示例
2021/05/07 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
instantclient客户端 连接oracle数据库
2022/04/26 Oracle