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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
jQuery定义插件的方法
Dec 18 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
JavaScript流程控制(分支)
Dec 06 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP strripos函数用法总结
2019/02/11 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
详解Matplotlib绘图之属性设置
2019/08/23 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
运动会广播稿60字
2014/01/15 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
小学生家长评语大全
2014/02/10 职场文书
红旗方阵解说词
2014/02/12 职场文书
工商管理专业自荐信
2014/06/03 职场文书
学风建设演讲稿
2014/09/12 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
python tkinter模块的简单使用
2021/04/07 Python