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

最新推荐文章于 2025-01-21 10:32:49 发布

原创最新推荐文章于 2025-01-21 10:32:49 发布 · 955 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #css

本文介绍如何在Vue中使用自定义指令实现div元素的拖拽功能。通过定义drag指令并将其绑定到需要拖拽的div上，可以轻松实现元素的鼠标拖动效果。文章详细解释了drag指令的工作原理，并提供了代码示例。

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

- 在组件中定义drag指令
- 需要拖拽的容器标签中添加v-drag

在组件中定义drag指令

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