https://github.com/zhanziyang/v-dragged
Vue directive plugin for drag event detection.
https://github.com/zhanziyang/v-dragged
directive drag event vue vue-plugin
Last synced: 5 months ago
JSON representation
Vue directive plugin for drag event detection.
- Host: GitHub
- URL: https://github.com/zhanziyang/v-dragged
- Owner: zhanziyang
- License: isc
- Created: 2017-10-09T12:59:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-17T14:54:29.000Z (over 7 years ago)
- Last Synced: 2025-10-22T03:53:23.206Z (9 months ago)
- Topics: directive, drag, event, vue, vue-plugin
- Language: JavaScript
- Homepage: https://zhanziyang.github.io/v-dragged/
- Size: 269 KB
- Stars: 90
- Watchers: 3
- Forks: 16
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue - v-dragged - Vue directive plugin for drag event detection. ` 📝 3 years ago` (UI Utilities [🔝](#readme))
- awesome-vue-zh - V-拖 - 用于拖动事件检测的Vue 2.x指令插件. (UI实用程序 / 事件处理)
- awesome-vue - v-dragged ★44 - Vue 2.x directive plugin for drag event detection. (UI Utilities / Event Handling)
- awesome-vue - v-dragged - Vue 2.x directive plugin for drag event detection. (Components & Libraries / UI Utilities)
- awesome-vue - v-dragged - Vue 2.x directive plugin for drag event detection. (UI Utilities / Event Handling)
README
# v-dragged
> Vue directive plugin for drag event detection.
**NOTE:** This directive listens for mouse/touch events, and sets 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
```bash
npm install --save v-dragged
```
```js
import Vue from 'vue'
import VDragged from 'v-dragged'
Vue.use(VDragged)
```
## Example
In your component:
```html
```
```js
{
// ...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'
}
}
}
```
### Event Details
The argument passed to the event handler is an object containing the following properties:
#### `el`
- The target element on which the directive 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** coordinate from the last position.
It is `undefined` when `first` or `last` is `true`.
- type: Number
#### `deltaY`
- The change of the pointer (mouse/touch)'s **y** coordinate from the last position.
It is `undefined` when `first` or `last` is `true`.
- type: Number
#### `offsetX`
- The change of the pointer (mouse/touch)'s **x** coordinate from **the starting position**.
It is `undefined` when `first` or `last` is `true`.
- type: Number
#### `offsetY`
- The change of the pointer (mouse/touch)'s **y** coordinate from **the starting position**.
It is `undefined` when `first` or `last` is `true`.
- type: Number
#### `clientX`
- Current **x** coordinate of the pointer (mouse/touch).
- type: Number
#### `clientY`
- Current **y** coordinate of the pointer (mouse/touch).
- type: Number
## Modifier
#### `prevent`
- prevent default events on pointer events (`touchstart`, `touchmove`, `touchend`, `mousedown`, `mousemove`, `mouseup`).
```html
```