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开发的时候,我们不可避免会使用到导航菜单,element方便的为我们提供了导航菜单组件,下面这篇文章主要给大家介绍了关于el-menu实现横向溢出截取的相关资料,需要的朋友可以参考下2022-06-06
本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码，有兴趣的朋友参考学习下。2018-06-06
使用Vue.js报错：ReferenceError: “Vue is not d
在前端开发中,ReferenceError: "Vue is not defined" 是一个常见的错误,该错误通常发生在项目中未正确引入 Vue.js 框架或代码配置存在问题时,本篇文章将详细分析该错误的成因,并提供多种解决方案,帮助开发者快速排查问题,需要的朋友可以参考下2024-12-12
这篇文章主要给大家分享的是Vue子组件接收父组件传值的3种方式，主要通过声明接收、接收数据的同时进行 类型限制、接收数据的同时对 数据类型、必要性、默认值 进行限制相关内容展开更多详细的相关资料，需要的小伙伴可以参考一下2022-03-03
Vue3使用transition组件改变DOM属性的方式小结
这篇文章主要为大家详细介绍了Vue3中使用transition组件改变DOM属性的常用方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
elementUI如何动态给el-tree添加子节点数据children详解
element-ui 目前基本成为前端pc网页端标准ui框架,下面这篇文章主要给大家介绍了关于elementUI如何动态给el-tree添加子节点数据children的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要为大家介绍了功能强大的vue.js拖拽组件安装应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了Vue + Elementui实现多标签页共存的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
uniapp vue3中使用webview在微信小程序实现双向通讯功能
微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,这篇文章主要给大家介绍了关于uniapp vue3中使用webview在微信小程序实现双向通讯功能的相关资料,需要的朋友可以参考下2024-07-07
最新评论