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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
vant实现购物车功能
Jun 29 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Yii中表单用法实例详解
2016/01/05 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
ext 代码生成器
2009/08/07 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python中模块string.py详解
2017/03/12 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
通过cmd进入python的步骤
2020/06/16 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
党员检讨书
2014/10/13 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏