zhanziyang / V Dragged
Licence: isc
Vue directive plugin for drag event detection.
Stars: ✭ 84
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to V Dragged
Vue Scrollto
Adds a directive that listens for click events and scrolls to elements.
Stars: ✭ 1,859 (+2113.1%)
Mutual labels: directive, vue-plugin
Dragranksquare
edit personal information which enables users to drag and rank image order
Stars: ✭ 1,115 (+1227.38%)
Mutual labels: drag
Hack Day
An event organised by GNU/Linux Users' Group, NIT Durgapur. Visit
Stars: ✭ 64 (-23.81%)
Mutual labels: event
Bekit
bekit框架致力于解决在应用开发中的公共性痛点,已有“事件总线”、“流程引擎”、“服务引擎”。其中“流程引擎”可作为分布式事务解决方案saga模式的一种实现,并且它很轻量不需要服务端、不需要配置,就可直接使用。
Stars: ✭ 71 (-15.48%)
Mutual labels: event
Danf
Danf is a Node.js full-stack isomorphic OOP framework allowing to code the same way on both client and server sides. It helps you to make deep architectures and handle asynchronous flows in order to help in producing scalable, maintainable, testable and performant applications.
Stars: ✭ 58 (-30.95%)
Mutual labels: event
Android
Android projects with reusable components which will be useful in your applications.
Stars: ✭ 81 (-3.57%)
Mutual labels: drag
Stickerview
[No more support] A view which can add sticker and zoom,drag,delete it
Stars: ✭ 1,155 (+1275%)
Mutual labels: drag
Vue Scroll Progress Bar
Vue.js plugin for page scroll progress bar
Stars: ✭ 76 (-9.52%)
Mutual labels: vue-plugin
Rxbus
Android reactive event bus that simplifies communication between Presenters, Activities, Fragments, Threads, Services, etc.
Stars: ✭ 79 (-5.95%)
Mutual labels: event
Vue Lazyload Images
A plugin of lazy-load images for Vue2.x
Stars: ✭ 61 (-27.38%)
Mutual labels: vue-plugin
Laravel Schematics
A Laravel package making a diagram of your models, relations and the ability to build them with it
Stars: ✭ 1,137 (+1253.57%)
Mutual labels: drag
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: ✭ 1,240 (+1376.19%)
Mutual labels: vue-plugin
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
npm install --save v-dragged
import Vue from 'vue'
import VDragged from 'v-dragged'
Vue.use(VDragged)
Example
In your component:
<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'
}
}
}
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 isundefined
whenfirst
orlast
istrue
. - type: Number
deltaY
- The change of the pointer (mouse/touch)'s y coordinate from the last position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
offsetX
- The change of the pointer (mouse/touch)'s x coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
offsetY
- The change of the pointer (mouse/touch)'s y coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - 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
).
<div v-dragged.prevent="onDragged"></div>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].