Vue实现简单的拖拽效果


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了Vue实现简单拖拽效果的具体代码,供大家参考,具体内容如下

自定义指令v-drag

l 存在时 只能横向拖拽

t 存在时 只能纵向拖拽

lt都存在时 可以任意方向拖拽

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>拖拽</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  #box{
   background: red;
   width: 100px;
   height: 100px;
   position: absolute;
 
  }
 </style>
 <script src="vue.js"></script>
</head>
<body>
 <div id="app">
  <div id="box" v-drag.l.t="flag"></div>
 </div>
 <script>
  Vue.directive("drag",(el,{modifiers,value})=>{
   let{l,t}=modifiers;
 
 
   el.addEventListener("mousedown",handleDownCb)
 
   let disX,disY;
   function handleDownCb(e){
    disX=e.offsetX;
    disY=e.offsetY;
    // console.log(disX,disY)
    document.addEventListener("mousemove",handleMoveCb);
    document.addEventListener("mouseup",handleUpCb);
   }
 
   function handleMoveCb(e){
    let x=e.clientX-disX;
    let y=e.clientY-disY;
    if((l&&t) && value){
     el.style.left=x+"px";     
     el.style.top=y+"px";
     return;
    }
 
    if(l&&value){
     el.style.left=x+"px";     
     return;
    }
    if(t&&value){
     el.style.top=y+"px";
     return;
    }
   }
 
   function handleUpCb(){
    document.removeEventListener("mousemove",handleMoveCb);
    document.removeEventListener("mouseup",handleUpCb);
   }
 
  })
  let vm=new Vue({
   el:"#app",
   data:{
    flag:true
   }
  })
 </script>
</body>
</html>

注:

改变v-drag.l  v-drag.t  v-drag.l.t  即可实现横向 纵向 任意方向的拖拽

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

Javascript 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
深入理解移动前端开发之viewport
Oct 19 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 #Javascript
JS实现拖动模糊框特效
Aug 25 #Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 #Javascript
JS轮播图的实现方法2
Aug 25 #Javascript
JS轮播图的实现方法
Aug 24 #Javascript
js 函数性能比较方法
Aug 24 #Javascript
JavaScript实现简单验证码
Aug 24 #Javascript
You might like
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python编写俄罗斯方块
2020/03/13 Python
python实现UDP协议下的文件传输
2020/03/20 Python
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
银行员工考核评语
2014/12/31 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Python django中如何使用restful框架
2021/06/23 Python