/vue-packery-draggabilly-plugin

A vue plugin for draggabilly

Primary LanguageJavaScriptMIT LicenseMIT

Vue.js Packery Draggabilly Plugin

Addon to support draggabilly for Vue.js Packery Plugin

Requirements

Vue.js Packery Plugin must be present in project

Installing

npm install --save vue-packery-draggabilly-plugin

then

import VueDraggabillyPlugin from 'vue-packery-draggabilly-plugin'

Vue.use(VueDraggabillyPlugin)

Usage

<div v-draggabilly v-packery='{itemSelector: ".packery-item", percentPosition: true}'>

    <div v-draggabilly v-packery-item class='packery-item'></div>
    <div v-draggabilly v-packery-item class='packery-item'></div>
    <div v-draggabilly v-packery-item class='packery-item'></div>

</div>

Options

Pass an object with Draggabilly options as an argument to the v-draggabilly directive to change the settings.

Passing along the custom key disableDraggabilly with a bool, disables/enables (true/false) the draggabilly instace via the official draggie.disable() & draggie.enable() methods. Or the custom key recalculateOnMove which updates card position upon drag, good for CSS transformed views.

Example usage:

<div v-draggabilly="{
    axis: 'x',
    grid: [ 20, 20 ],
    handle: '.handle',
    containment: true,
    disableDraggabilly: false
}" v-packery-item class='packery-item'></div>