vue 拖拽指令
v拖曳 (v-dragged)
Vue 2.x directive plugin for drag event detection.
Vue 2.x指令插件,用于拖动事件检测。
安装 (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
whenfirst
orlast
istrue
.指针(鼠标/触摸)的x坐标从最后一个位置开始的变化。 当
first
或last
为true
时undefined
。type: Number
类型:数字
三角洲 (deltaY)
The change of the pointer (mouse/touch)'s y coordination from the last position.
undefined
whenfirst
orlast
istrue
.指针(鼠标/触摸)的y坐标从最后一个位置开始的变化。 当
first
或last
为true
时undefined
。type: Number
类型:数字
偏移量 (offsetX)
The change of the pointer (mouse/touch)'s x coordination from the starting position.
undefined
whenfirst
orlast
istrue
.指针(鼠标/触摸)的x坐标从起始位置开始的变化 。 当
first
或last
为true
时undefined
。type: Number
类型:数字
偏移量 (offsetY)
The change of the pointer (mouse/touch)'s y coordination from the starting position.
undefined
whenfirst
orlast
istrue
.指针(鼠标/触摸)的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 拖拽指令