whimsicaldreamer / vue-packery-draggabilly-plugin

A vue plugin for draggabilly

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>