v-dragged
Vue directive plugin for drag event detection.
NOTE: This directive listens to the mouse/touch behavior and set a handler for when a drag action is detected. This is different from setting draggable
on element in that you need to move the element yourself according to the information v-dragged provides.
Install
npm install --save v-dragged
Vue
Example
// ...other options omitted methods: { if first thisdragged = true return if last thisdragged = false return var l = +window'left' || 0 var t = +window'top' || 0 elstyleleft = l + deltaX + 'px' elstyletop = 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
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
. - type: Number
deltaY
- The change of the pointer (mouse/touch)'s y coordination from the last position.
undefined
whenfirst
orlast
istrue
. - type: Number
offsetX
- The change of the pointer (mouse/touch)'s x coordination from the starting position.
undefined
whenfirst
orlast
istrue
. - type: Number
offsetY
- The change of the pointer (mouse/touch)'s y coordination from the starting position.
undefined
whenfirst
orlast
istrue
. - type: Number
clientX
- Current x coordination of the pointer (mouse/touch).
- type: Number
clientY
- Current y coordination of the pointer (mouse/touch).
- type: Number