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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
ES6数组的扩展详解
Apr 25 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 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 表单数据的获取代码
2009/03/10 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python实现批量图片格式转换
2020/06/16 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python 实现进度条的六种方式
2021/01/06 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
毕业证丢失证明
2014/01/15 职场文书
初级会计求职信范文
2014/02/15 职场文书
电子专业求职信
2014/06/19 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
python中print格式化输出的问题
2021/04/16 Python