aureliadragula

How to set container specific options in Aurelia-Dragula?


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.


Solution

  • 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)
      }
    }