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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
react redux入门示例
Apr 19 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
vue实现抖音时间转盘
Sep 08 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
FCK调用方法..
2006/12/21 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
用Vue写一个分页器的示例代码
2018/04/22 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
js实现简易计算器功能
2019/10/18 Javascript
PYTHON基础-时间日期处理小结
2018/05/05 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python中有帮助函数吗
2020/06/19 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
教育局长自荐信范文
2013/12/22 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js