vue 拖拽指令_Vue指令插件，用于拖动事件检测

vue 拖拽指令

v拖曳 (v-dragged)

Vue 2.x directive plugin for drag event detection.

Vue 2.x指令插件，用于拖动事件检测。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save v-dragged

import Vue from 'vue'
import VDragged from 'v-dragged'

Vue.use(VDragged)

例 (Example)

<div v-dragged="onDragged"></div>

{
  // ...other options omitted

  methods: {
    onDragged({ el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last }) {
      if (first) {
        this.dragged = true
        return
      }
      if (last) {
        this.dragged = 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'
    }
  }
}

活动详情 (Event Details)

The argument passed to the callback function is an object containing the following properties:

传递给回调函数的参数是一个包含以下属性的对象：

埃尔 (el)

• The target element on which the diretive binds.

  定向绑定的目标元素。

• type: HTMLElement

  类型：HTMLElement

第一 (first)

• A boolean to indicate whether it is the first move of the drag. (drag starts here).

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

• type: Boolean

  类型：布尔型

持续 (last)

• A boolean to indicate whether it is the last move of the drag. (drag ends here).

  一个布尔值，指示是否为拖动的最后一步。 (拖动到此结束)。

• type: Boolean

  类型：布尔型

三角洲 (deltaX)

• The change of the pointer (mouse/touch)'s x coordination from the last position. undefined when first or last is true.

  指针(鼠标/触摸)的x坐标从最后一个位置开始的变化。 当first或last为true时undefined 。

• type: Number

  类型：数字

三角洲 (deltaY)

• The change of the pointer (mouse/touch)'s y coordination from the last position. undefined when first or last is true.

  指针(鼠标/触摸)的y坐标从最后一个位置开始的变化。 当first或last为true时undefined 。

• type: Number

  类型：数字

偏移量 (offsetX)

• The change of the pointer (mouse/touch)'s x coordination from the starting position. undefined when first or last is true.

  指针(鼠标/触摸)的x坐标从起始位置开始的变化 。 当first或last为true时undefined 。

• type: Number

  类型：数字

偏移量 (offsetY)

• The change of the pointer (mouse/touch)'s y coordination from the starting position. undefined when first or last is true.

  指针(鼠标/触摸)的y坐标从起始位置开始的变化 。 当first或last为true时undefined 。

• type: Number

  类型：数字

客户X (clientX)

• Current x coordination of the pointer (mouse/touch).

  指针的当前x坐标(鼠标/触摸)。

• type: Number

  类型：数字

客户 (clientY)

• Current y coordination of the pointer (mouse/touch).

  指针的当前y坐标(鼠标/触摸)。

• type: Number

  类型：数字

修饰符 (Modifier)

防止 (prevent)

• prevent default on pointer events (touchstart, touchmove, touchend, mousedown, mousemove, mouseup).

  防止默认发生指针事件(touchstart，touchmove，touchend，mousedown，mousemove，mouseup)。

<div v-dragged.prevent="onDragged"></div>

翻译自: https://vuejsexamples.com/vue-directive-plugin-for-drag-event-detection/

vue 拖拽指令