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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
JS排序之快速排序详解
Apr 08 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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中static静态变量的使用方法详解
2010/06/04 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python虚拟环境项目实例
2017/11/20 Python
pycharm安装和首次使用教程
2018/08/27 Python
python dict 相同key 合并value的实例
2019/01/21 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
面试通知邮件
2015/04/20 职场文书
小学校园广播稿
2015/08/18 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书