@dragndrop/vue-dropzone v0.0.4
Dropzone
Draggable component for VueJS 2+ which implements @dragndrop/dropzone component.
Design & API Documentation
Installation
npm install @dragndrop/vue-dropzone
Usage
Dropzone element can be used in common with Draggable element to create variety of drag and drop powered components for websites.
Typescript support
Component has its declarations (*.d.ts) for Typescript available.
Registration
import {VueDropzone} from '@dragndrop/vue-dropzone';
Vue.component('VueDropzone', VueDropzone);
Registration as plugin
import Vue from 'vue';
import VueDropzone from '@dragndrop/vue-dropzone';
Vue.use(VueDropzone);
Simple example
<template>
<VueDropzone
:acceptor="acceptor"
@onDrop="onDrop"
>
<div>Dropzone for draggable element</div>
</VueDropzone>
</template>
<script>
export default {
data() {
return {
acceptor: new DraggablesAcceptor(draggable),
}
},
methods: {
onDrop(event) {
console.log(event.dragInfo.data); // 'example data'
}
}
}
</script>
CSS Classes (they can be changed)
CSS Class | Description |
---|---|
dragging--over | Sets this class to element when draggable element is draggedOver the dropzone |
dragging--invalid | Sets this class to element when draggable element is not accepted by dropzone |
Events
Events | Type | Data | Description |
---|---|---|---|
onDragEnter | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when Draggable enters on Dropzone |
onDragLeave | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when Draggable leaves on Dropzone |
onDragOver | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when Draggable is over on Dropzone |
onDrop | CustomEvent | {originalEvent, dragInfo, dropzoneElement} | Event dispatched when Draggable is dropped on Dropzone |
Props
Property | Value Type | Description |
---|---|---|
acceptor | Acceptor | Data which is attached to draggable |
exact | boolean | Events from Draggable are stopped with stopPropagation() when exact is true. |
overClass | String | Class which is set on element when draggingOver (dragging--over default) |
invalidClass | String | Class which is set on element when draggingOver not accepted element (dragging--invalid default) |
allowOnChild | boolean | It allows to drop, if draggable is a child of dropzone, without dragging outside. |
Method Signature | Description |
---|---|
destroy() => void | Clean up method. Is called on beforeDestroy hook. |
Acceptor
Acceptor allows to provide instructions to dropzone which elements should be accepted and which should not.
When Element is not accepted it can`t be dropped on Dropzone.
abstract accepts<D>(dragInfo: DragInfo<D>, dropzoneElement: Element, event: Event): boolean;
Acceptor is abstract class with accepts method which should be implemented.
Argument | Type | Description |
---|---|---|
dragInfo | DragInfo | Info from Draggable which is snapped when dragging |
dropzoneElement | Element | Dropzone element on which element is dragged |
event | CustomEvent | Custom Event dispatched _customDragEnter , _customDragLeave , _customDragOver and _customDrop |
Default there is only DraggablesAcceptor
implemented which is accepting given Draggables
.
If you need you can write your own Acceptor
for example QuerySelectorAcceptor to accept elements with given querySelectors.
Or DataTransferAcceptor which accepts elements with specific data attached to draggable.