vue实现拖拽效果


Posted in Javascript onDecember 23, 2019

vue中实现拖拽效果,供大家参考,具体内容如下

首先要搞明白分清clientY pageY screenY layerY offsetY的区别

作用3(事件对象中记录的鼠标位置)

语法 解释

evt.screenX 相对于屏幕的左上角为原点
evt.screenY

evt.clientX 相对于浏览器的客户端左上角为原点(不计算滚动条位置)
evt.clientY

evt.pageX 相对于浏览器的客户端左上角为原点(计算滚动条的位置)
evt.pageY

evt.offsetX 以自己的左上角为原点
evt.offsetY

vue实现拖拽效果

evt.pageY/evt.pageX 相当于文档的左上角为原点,即包括被被隐藏的距离;

evt.clientY/evt.clientX 相当于浏览器可视窗口的左上角为原点,即不包括被被隐藏的距离;

实现拖拽功能

<style>
 #app{
 position: relative; /*定位*/
 top: 10px;
 left: 10px;
 width: 200px;
 height: 200px;
 background: #666; /*设置一下背景*/
 }
</style>
<body>
 <div id="app" @mousedown="move"> <!--绑定按下事件-->
 {{positionX}}
 {{positionY}}
 </div>
</body>
//main.js
let app = new Vue({
 el:'#app',
 data:{
 positionX:0,
 positionY:0,
 },
 methods:{
 move(e){
  let odiv = e.target; //获取目标元素
  
  //算出鼠标相对元素的位置
  let disX = e.clientX - odiv.offsetLeft;
  let disY = e.clientY - odiv.offsetTop;
  document.onmousemove = (e)=>{ //鼠标按下并移动的事件
  //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
  let left = e.clientX - disX; 
  let top = e.clientY - disY;
   
  //绑定元素位置到positionX和positionY上面
  this.positionX = top;
  this.positionY = left;
   
  //移动当前元素
  odiv.style.left = left + 'px';
  odiv.style.top = top + 'px';
  };
  document.onmouseup = (e) => {
  document.onmousemove = null;
  document.onmouseup = null;
  };
 } 
 
 },
 computed:{},
});

当然,我们可以将它绑定为一个自定义指令,这样的话就可以用调用指令的形式来实现拖拽效果,下面是定义自定义指令的代码

在main.js中定义全局指令

Vue.directive('drag'
 drag: {
  // 指令的定义
  bind(el) {
  let odiv = el; //获取当前元素
  oDiv.onmousedown = (e) => {
   //算出鼠标相对元素的位置
   let disX = e.clientX - odiv.offsetLeft;
   let disY = e.clientY - odiv.offsetTop;
   
   document.onmousemove = (e)=>{
   //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
   let left = e.clientX - disX; 
   let top = e.clientY - disY;
   
   if(left<3) {
    left=0;
    odiv.style.width="2px";
   }else{odiv.style.width="auto";}
   if(left>innerWidth-odiv.offsetWidth) {left=innerWidth- odiv.offsetWidth;odiv.style.width="2px";}
   
   //移动当前元素
   odiv.style.left = left + 'px';
   odiv.style.top = top + 'px';
   };
   document.onmouseup = (e) => {
   document.onmousemove = null;
   document.onmouseup = null;
   };
   }
 }
});

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

Javascript 相关文章推荐
js DOM的学习笔记
Dec 22 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
jQuery简单实现日历的方法
May 04 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
JavaScript中的闭包
Feb 24 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 #Javascript
Angular如何由模板生成DOM树的方法
Dec 23 #Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 #Javascript
You might like
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python网络编程详解
2017/10/31 Python
python中Apriori算法实现讲解
2017/12/10 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django 再谈一谈json序列化
2020/03/16 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
综合实践活动方案
2014/02/14 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
自我工作评价范文
2015/03/06 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers