Draggable

Draggable component for VueJS 2+ which implements @dragndrop/draggable component.

Design & API Documentation

• Demos

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.