Vue实现简单的拖拽效果

更新时间：2020年08月25日 09:05:54 作者：joker.ma

这篇文章主要为大家详细介绍了Vue实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 即可实现横向纵向任意方向的拖拽

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue
拖拽

vue实现token登录验证的完整实例
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
Vue3+X6流程图实现数据双向绑定详解
这篇文章主要为大家详细介绍了Vue3如何结合X6流程图实现数据双向绑定,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
Vue中如何使用mock模拟数据
这篇文章主要介绍了Vue中如何使用mock模拟数据，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
在vue中使用jointjs的方法
本篇文章主要介绍了在vue中使用jointjs的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue的.vue文件是怎么run起来的(vue-loader)
通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下
2018-12-12
vue实现书本翻页动画效果实例详解
这篇文章主要介绍了vue简单实现书本翻页效果,需要的朋友可以参考下
2022-04-04
vue弹窗嵌入其它vue页面的操作代码
这篇文章主要介绍了vue弹窗如何嵌入其它vue页面,实现方式是将其他页面作为组件传入，在父页面将该组件引入到弹框内，实例代码简单易懂需要的朋友可以参考下
2022-11-11
详解vue如何给特殊字段设置插槽
这篇文章主要为大家详细介绍了vue如何实现给特殊字段设置插槽,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
2023-09-09
如何解决Element UI el-dialog打开一次后无法再次打开问题
这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue实现页面跳转和参数传递的两种方式
这篇文章主要介绍了vue页面跳转和参数传递的两种方式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09