vue自定义指令--拖拽(代码示例)
发布日期:2022-02-12 16:06:55 浏览次数:1 分类:技术文章

本文共 1033 字,大约阅读时间需要 3 分钟。

vue自定义指令

拖拽

代码

   
      
    
       
       
     
        
        
      
         
       
.box01{    
position: absolute;
width: 100px;
height: 100px;
background: #FF0000;
font-size: 20px;
text-align: center;
line-height: 100px;
left:0;
top: 0;
cursor: move;
}  



let vm =new Vue({    
el:'#box',
data:{    
msg:'拖拽盒子'
},
//局部指令-拖拽
directives:{    
drap(el,binding){    
el.οnmοusedοwn=function(){    //鼠标在盒子中按下触发
let w=el.offsetWidth;//盒子的宽度
let h=el.offsetHeight;//盒子的高度
document.οnmοusemοve=function(e){    //鼠标按下的基础上,在页面中移动触发
let bw=document.documentElement.clientWidth;//页面的可视宽度
let bh=document.documentElement.clientHeight;//页面的可视高度
let X=e.clientX;
let Y=e.clientY;//鼠标的坐标X,Y
let l=X-w/2;
let t=Y-h/2;//保持鼠标在盒子的正中央
l=l<0?0:l;
t=t<0?0:t;
l=l>bw-w?bw-w:l;
t=t>bh-h?bh-h:t;//以上为了让盒子移动过程中不会超出可视页面的范围
el.style.left=l+'px';
el.style.top=t+'px';//设置盒子的定位坐标
}
}
document.οnmοuseup=function(){    
document.οnmοusemοve=null//当鼠标抬起时,取消移动事件
}
}
}
})

转载地址:https://blog.csdn.net/weixin_46663768/article/details/105128537 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:P4编程理论与实践(2)—快速上手(转发)
下一篇:解构赋值(对象和数组)

发表评论

最新留言

很好
[***.36.149.58]2022年06月20日 13时36分05秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章