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 相关文章推荐
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
js+css实现打字效果
Jun 24 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
Puppet的一些技巧
Sep 17 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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定时发送服务的解决办法
2017/04/23 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
webpack3之loader全解析
2017/10/26 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
没编程基础可以学python吗
2020/06/17 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
几道Java和数据库的面试题
2013/05/30 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
同学聚会主持词
2014/03/18 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
挂职学习心得体会
2014/09/09 职场文书
财务审计整改报告
2014/11/06 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
财产分割协议书
2016/03/22 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python