@atomic-nyc/vue-draggable

    1.0.1 • Public • Published

    vue-draggable

    npm version

    An easy-to-use draggable component for Vue.js powered by Atomic NYC.

    Installation

    $ npm install @atomic-nyc/vue-draggable --save
    

    Browser

    Include the script file then install the component with Vue.use(VueDraggable);

    <script type="text/javascript" src="/node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/@atomic-nyc/vue-draggable/dist/vue-draggable.min.js"></script>
    <script type="text/javascript">
        Vue.use(VueDraggable);
    </script> 

    Module

    import VueDraggable from '@atomic-nyc/vue-draggable';

    Usage

    Once installed, use it in a Vue template as follows:

    <vue-draggable>
        <div>This div is draggable.</div>
    </vue-draggable>

    Images even become draggable:

    <vue-draggable>
        <img src="./assets/draggable-logo.png">
    </vue-draggable>

    Props

    styles

    Type: Object
    Required: false

    Custom styling applied to the outer div of the vue-draggable

    Example
    <vue-draggable :styles="{ backgroundColor: 'red'}">
        <img src="./assets/draggable-logo.png">
    </vue-draggable>

    Events

    mouseDown

    Custom function emitted when user clicks mouse button on the draggable component.

    mouseMove

    Custom function emitted when user moves the draggable component.

    mouseUp

    Custom function emitted when user releases mouse button from the draggable component.

    Example

    Assume the handleMouseDown function is defined in methods.

    <vue-draggable @mouseDown="handleMouseDown">
        <img src="./assets/draggable-logo.png">
    </vue-draggable>

    This package is compatible with Vue.js Server-Side Rendering.

    Install

    npm i @atomic-nyc/vue-draggable

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar