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之十 事件模块概述
Jun 27 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 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/29 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
django 环境变量配置过程详解
2019/08/06 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
详解python with 上下文管理器
2020/09/02 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
小班上学期评语
2014/05/05 职场文书
员工年终考核评语
2014/12/31 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
公司岗位说明书
2015/10/08 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python