Ionic Dragula， setOptions mirrorContainer 为 null.在 DOM 之前加载

Question

我有一个使用dragula的离子项目，但是我在设置mirrorContainer时遇到了问题。 我想使容器不是默认body，因为我相信这就是我在拖动时遇到的奇怪滚动问题的原因。

我已经用 html 创建了我的bag

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

然后在 JS 中，我在构造函数中初始化了 dragula 并开始设置其选项。

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

问题是;当我将mirrorContainer: document.getElementById('mirror')添加到setOptions时，我的镜像容器返回为null。 我假设是因为这是在 DOM 之前加载的，并且还没有#mirror实例。

如果我将所有内容都移到ionViewDidLoad(){}，则会出现一个错误，指出the bag 'bag' already exists.

我不确定在 DOM 加载后初始化或添加到选项的最佳方法。 有什么想法吗？

Answer 1

我知道

我迟到了，但我在使用 Angular 11 时遇到了同样的问题。

在您的元素在 DOM 中并且可用后，您可以执行此操作。

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