CODEWITHSUNDEEP
javascripttypescriptionic2dragula
ntgCleaner
ntgCleaner

Reputation: 5985

Ionic Dragula, setOptions mirrorContainer is null. Loading before DOM

I have an ionic project that is using dragula, but I'm having an issue setting the mirrorContainer. I'd like to make the container something other than the default body because I believe that's what is attributing to a strange scrolling problem I'm having while dragging.

I've created my bag in html

<div class="step-container--line" [dragula]='"bag"' id="mirror">
    <div class="card">
    ....
</div>

Then in the JS, I've initialized dragula in the constructor and started to set its options.

constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('bag', {
      moves: function (el, container, handle) {
        return handle.className === 'step__menu__button';
      },
      direction: 'vertical',
      //mirrorContainer: document.getElementById('mirror')
    });
    dragulaService.drag.subscribe((value) => {
      this.onDrag(value.slice(1));
    });
    dragulaService.drop.subscribe((value) => {
      this.onDrop(value.slice(1));
    });
}

The problem is; when I add mirrorContainer: document.getElementById('mirror') to the setOptions, my mirror container comes back as null. I'm assuming because this loads before the DOM does and there's no instance of #mirror yet.

If I moved everything down into ionViewDidLoad(){}, I get an error stating that the bag 'bag' already exists.

I'm not sure the best way to initialize or add to the options after the DOM loads. Any ideas?

Upvotes: 1

Views: 542

Answers (1)

M27
M27

Reputation: 128

I know I'm late to the party but I had the same issue using Angular 11.

After your element is in the DOM and is available you can do this.

ionViewDidLoad() {
    (this.dragulaService as any).groups['bag'].options.mirrorContainer = document.getElementById('mirror');
}

Upvotes: 0

Related Questions