Vue拖拽效果 Vue实现简单的拖拽效果

时间:2021-03-16 joker.ma 人气:0

想了解Vue实现简单的拖拽效果的相关内容吗，joker.ma在本文为您仔细讲解Vue拖拽效果的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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 即可实现横向纵向任意方向的拖拽

加载全部内容