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 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python进行TCP端口扫描的实现
2018/12/21 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
机械系大学毕业生推荐信
2013/11/27 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
关于安全的标语
2014/06/10 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript