0.0.4 • Published 4 years ago
@dragndrop/vue-draggable v0.0.4
Draggable
Draggable component for VueJS 2+ which implements @dragndrop/draggable component.
Design & API Documentation
Installation
npm install @dragndrop/vue-draggable
Usage
Draggable element can be used for different functionalities - from moving elements around to make sortable list or draggable grid elements.
Typescript support
Component has its declarations (*.d.ts) for Typescript available.
Registration
import {VueDraggable} from '@dragndrop/vue-draggable';
Vue.component('VueDraggable', VueDraggable);
Registration as plugin
import Vue from 'vue';
import VueDraggable from '@dragndrop/vue-draggable';
Vue.use(VueDraggable);
Simple example
<template>
<VueDraggable
:data="dataTransfer"
:avatar="avatar"
@onDrag="onDrag"
>
<div>Example element</div>
</VueDraggable>
</template>
<script>
export default {
data() {
return {
dataTransfer: 'example data',
avatar: new Avatar.clone(),
}
},
methods: {
onDrag(event) {
console.log(event.dragInfo.data); // 'example data'
}
}
}
</script>
CSS Classes (they can be changed)
CSS Class | Description |
---|---|
draggable--dragging | Sets this class to element when dragging |
draggable--occurring | Sets this class to body element when dragging |
Shadow DOM
If you want to use dragndrop in Shadow DOM you need to add draggable--retarget
attribute to your host element so events will be bubble through Shoadow DOM and recursive elementFromPoint()
calls will work correctly.
Events
Events | Type | Data | Description |
---|---|---|---|
onDragStart | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when dragging starts |
onDrag | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when dragging |
onDragEnd | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when dragging ends |
DragInfo
DragInfo | Type | Description |
---|---|---|
draggableId | Number | Id of draggable element |
element | Element | Draggable element |
data | Type Generic | Data attached to draggable with data property |
startPosition | Point | Start position |
avatar | Avatar | Avatar attached to draggable with avatar property |
axis | Axis | Axis which dragging is handled 'horizontal', 'vertical' and 'both' |
position | Point | Current position of cursor |
shift | Point | Distance from start position to elements top-left corner |
Props
Property | Value Type | Description |
---|---|---|
data | Generic Type | Data which is attached to draggable |
draggable | Boolean | Turn on / off draggable functionality |
avatar | Avatar | Element which is rendered when element is dragging |
axis | Axis ('both', 'horizontal', 'vertical') | Axis the dragging is available for |
handle | String | Selector on which dragging is available (children of element are included) |
cancel | String | Selectors on which draggins is not available (children of element are included) |
draggingClass | String | Class which is set on element when dragging (draggable--dragging default) |
draggingClassBody | String | Class which is set on body element when dragging (draggable--occurring default) |
minDragStartDistance | number | Min distance to start dragStart state (4 default) |
touchAction | String or null | Makes touch-action property set on element when drag is started (undefined default) |
customScroll | ((startPosition: Point, currentPosition: Point) => void) or boolean | Allows to specify customScroll behavior with function or when set with false prevents from custom scroll which is set by default |
Methods
Method Signature | Description |
---|---|
abort() => void | Aborts current dragging |
destroy() => void | Clean up method. Is used on beforeDestroy hook. |