vue拖动事件检测插件 - v-dragged

vue拖动事件检测插件 - v-dragged
插件名称 v-dragged
发布时间 2020年12月9日
插件作者 zhanziyang

一个Vue插件,用于拖动事件检测,侦听鼠标/触摸行为并设置检测到拖动动作的处理程序。这与draggable 在element上设置的不同之处 在于,您需要根据v-draagged提供的信息自行移动元素。

下载与安装:

npm install --save v-dragged

在您的组件中:

<div v-dragged="onDragged"></div>
{
  // ...other options omitted

  methods: {
    onDragged({ el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last }) {
      if (first) {
        this.isDragging = true
        return
      }
      if (last) {
        this.isDragging = false
        return
      }
      var l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0
      var t = +window.getComputedStyle(el)['top'].slice(0, -2) || 0
      el.style.left = l + deltaX + 'px'
      el.style.top = t + deltaY + 'px'
    }
  }
}

事件

传递给事件处理程序的参数是一个包含以下属性的对象:

el

  • 伪指令绑定到的目标元素。
  • 类型:HTMLElement

first

  • 一个布尔值,指示它是否为拖动的第一步。(从此处开始拖动)。
  • 类型:布尔型

last

  • 一个布尔值,指示是否为拖动的最后一步。(拖动到此结束)。
  • 类型:布尔型

deltaX

  • 指针(鼠标/触摸)的x坐标从最后一个位置开始的变化。
    这是undefinedfirstlasttrue
  • 类型:数字

deltaY

  • 指针(鼠标/触摸)的y坐标从最后一个位置开始的变化。
    这是undefinedfirstlasttrue
  • 类型:数字

offsetX

  • 指针(鼠标/触摸)的x坐标从起始位置开始的变化
    这是undefinedfirstlasttrue
  • 类型:数字

offsetY

  • 指针(鼠标/触摸)的y坐标从起始位置开始的变化
    这是undefinedfirstlasttrue
  • 类型:数字

clientX

  • 指针的当前x坐标(鼠标/触摸)。
  • 类型:数字

clientY

  • 指针的当前y坐标(鼠标/触摸)。
  • 类型:数字