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)

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

DragInfo

Props

Methods