vue中通过自定义指定实现div标签的拖拽

最新推荐文章于 2025-04-02 22:06:05 发布

前端不加班

最新推荐文章于 2025-04-02 22:06:05 发布

阅读量465

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_49515138/article/details/129182206

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

该文章介绍了如何在组件中定义一个名为drag的指令，用于实现元素的拖拽功能。通过监听鼠标按下和移动事件，计算元素的偏移量，并动态更新元素的位置。要使拖拽生效，需确保目标元素设置了position:absolute的固定定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在组件中定义drag指令

directives:{
   drag(el){
     el.onmousedown=function(e){
       let x = e.pageX - el.offsetLeft
       let y = e.pageY - el.offsetTop
       document.onmousedown=function(e){
        el.style.left = e.pageX - x + 'px'
        el.style.top = e.pageY - y + 'px'
       }
       //鼠标抬起事件
       document.onmouseup=function(){
        document.onmousemove = document.onmouseup = null
       }
     }
   }
}