时间戳

首页 > 解决方案 > ng2-dragula setOptions 和 drop 版本问题

angular - ng2-dragula setOptions 和 drop 版本问题

问题描述

显然 1.5.0 支持this.dragulaService.setOptions，而 2.1.1 不支持，反之，2.1.1 支持this.dragulaService.drop订阅 1.5.0 不支持。

Stackblitz Fork for 1.5.0

Stackblitz Fork 2.1.1

相关代码注意：

1.5.0（不工作）

（错误）：

无法调用其类型缺少调用签名的表达式。类型“EvenEmitter”没有兼容的调用签名。(属性) AppComponent.dragulaService: DragulaService

this.dragulaService.drop("dnd")
      .subscribe(({ name, el, target, source, sibling }) => {
      //content
}

1.5.0（工作）

this.dragulaService.setOptions('dnd', {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

2.1.1（工作）

this.dragulaService.drop("dnd")
    .subscribe(({ name, el, target, source, sibling }) => {
    //content
}

2.1.1（不工作）

this.dragulaService.createGroup("dnd", {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

（错误）：

'{moves: (el: any, source: any, handle: any,兄弟: any) => boolean; }' 不可分配给“DragulaOptions”类型的参数。对象字面量只能指定已知属性，并且“移动”不存在于“Dragula Options”类型中。（参数）句柄：任意

请注意，虽然有迁移指南和变更日志，但它确实说明 了如何将 setOptions 替换为 create group。但在我的情况下它仍然不起作用。

有没有办法同时使用这两个功能？还是我错过了一些明显的东西？

标签： angularng2-dragula

解决方案

您想要：创建组并一起使用拖放功能吗？

我们createGroup一起使用，drop但有一点区别，但有一点区别——在订阅中添加了丢弃服务，但我认为这没有任何问题。所以我们的代码是租用：

export class xxxComponent implements OnInit {
    ...
    public dragula$: Subscription
    ...

    constructor(public dragulaService: DragulaService) {

        this.dragulaService.createGroup('ITEMS', {
            direction: 'vertical',
            moves: (el, source, handle): boolean => handle.className.indexOf('item-keeper') > -1
        });
    }

    ngOnInit() {

        this.dragula$.add(this.dragulaService.drop('ITEMS')
            .subscribe(({name, el}) => {
                ....
            })
        );
    }

}

我认为我们的解决方案根据有关事件的文档是正确的： https ://github.com/valor-software/ng2-dragula#events

最后，我认为您的问题是类名错误，因为其他所有内容都可以在您的 Stackblitz 示例中完美运行。如果您取消注释：

    this.dragulaService.createGroup("dnd", {
      moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
    });

您的标签不可拖动，因此您可以获得所需的内容。

推荐阅读