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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
js比较日期大小的方法
May 12 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
小程序实现录音上传功能
Nov 22 Javascript
js实现自动播放匀速轮播图
Feb 06 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 分页原理分析,大家可以看看
2009/12/21 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python用for循环实现九九乘法表
2018/05/31 Python
对python3新增的byte类型详解
2018/12/04 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
JNI的定义
2012/11/25 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
国际贸易系求职信
2014/08/09 职场文书
运动会演讲稿100字
2014/08/25 职场文书
高中生毕业评语
2014/12/30 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js