I'm using Aurelia-Dragula (https://github.com/michaelmalonenz/aurelia-dragula) in my application and I want to set my options per container like in non-Aurelia Dragula.
In my case I want to have ContainerA where I want option.copy = true and ContainerB where I want option.removeOnSpill = true. so I tried both:
.plugin('aurelia-dragula', (options) => {
options.removeOnSpill = true;
options.copy = true;
})
But the result is that copy reigns and removeOnSpill doesn't work.
How options variable looks in aurelia-dragula when logged to the console:
{"containers":[],"copy":true,"copySortSource":false,"revertOnSpill":true,"removeOnSpill":true,"direction":"vertical","ignoreInputTextSelection":true,"mirrorContainer":{}}
Example of how it's done in non-Aurelia Dragula (source: https://bevacqua.github.io/dragula/):
dragula([document.getElementById(left), document.getElementById(right)], {
copy: function (el, source) {
return source === document.getElementById(left)
},
accepts: function (el, target) {
return target !== document.getElementById(left)
}
});
Due to how different the options is set and I can't find documentation for this in aurelia-dragula I'm not able to translate it.
Righto - so yes, it's absolutely possible.
I haven't tested this, but I believe this will work:
view.html
<template>
<aurelia-dragula containers.one-way="containers" copy.call="shouldCopy(item, container)" accepts.call="shouldAccept(item, target, source, reference)"></aurelia-dragula>
</template>
viewmodel.js
export class ViewModel {
get containers () {
return [document.getElementById(left), document.getElementById(right)]
}
shouldCopy (item, container) {
return container === document.getElementById(left)
}
shouldAccept(item, target, source, reference) {
return target !== document.getElementById(left)
}
}