Dynamic options

[nblackburn]

I have a slightly more complex use case where i am passing functions to some of the dragula options which requires knowledge of the container elements.

Normally you would define options globally for plugins in Vue but when faced with this use case, it is not possible anywhere other than in the component using this directive.

To gain access to Vue.vueDragula, i needed to make the following tweak to my code...

Vue.prototype.vueDragula = Vue.vueDragula;

Allowing access to the plugin within components which was previously not possible. Then i could define the options for a container as per usual.

let filterContainer = this.$els.filters;
let activeContainer = this.$els.attached;

this.vueDragula.options('filters', {

    removeOnSpill: true,
    revertOnSpill: true,
    direction: 'vertical',

    copy: (element, origin) => {
        return origin === filterContainer;
    },

    accepts: (element, target) => {
        return target === activeContainer;
    }
});

What is not mentioned in the documentation is this creates a new dragula instance under the hood and as a result doesn't carry over any containers should the service already exist.

let filterContainer = this.$els.filters;
let activeContainer = this.$els.attached;

this.vueDragula.options('filters', {

    containers: [
        filterContainer,
        activeContainer
    ],

    removeOnSpill: true,
    revertOnSpill: true,
    direction: 'vertical',

    copy: (element, origin) => {
        return origin === filterContainer;
    },

    accepts: (element, target) => {
        return target === activeContainer;
    }
});

After adding those in, it was using my options finally but now the library started falling apart and becoming almost unusable.

TL;DR - the library is hard to use for these kinds of use cases not to mention buggy which is a real shame.

[Astray-git]

Options are not shared among all bags.
You can set options for a specific bag in component directly like this:

Vue.vueDragula.options('filters', {
...
});

You don't have to put vueDragula in every vue instance.
It's one single store for all the bags in an application.

[Astray-git]

You can import Vue in a component:

var Vue = require('vue');
module.exports = {
  ...
  created: function () {
    Vue.vueDragula.options('filters', {
    ...
    });
  }
}

[nblackburn]

It is working as i mentioned in my original issue but is buggy when using the copy option which is what i meant when i previously said it doesn't work.

Edit: someone else has report the same issue #10.