ng2-dragula setOptions 和 drop 版本问题答案

【问题标题】：ng2-dragula setOptions and drop version problemng2-dragula setOptions 和 drop 版本问题
【发布时间】：2019-02-18 08:11:18
【问题描述】：

显然 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 for 2.1.1

相关代码注意：

1.5.0（不工作）

(Error):

无法调用类型缺少调用签名的表达式。类型 “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')
});

(Error):

'{moves: (el: any, source: any, handle: any,兄弟：任何）=> 布尔值； }' 不可分配给类型参数 'Dragula 选项'。对象字面量只能指定已知属性，并且在“Dragula Options”类型中不存在“moves”。（参数）句柄：任何

注意，虽然有 migration guide 和 changelog，但它确实有 state how to replace the setOptions into create group。但在我的情况下它仍然不起作用。

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

【问题讨论】：

标签： angular ng2-dragula

【解决方案1】：

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

我们将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')
    });

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

【讨论】：

我不知道为什么，但是当我根据文档尝试并取消注释时，正如你所说，这显然不是类名错误，但正如你在 screenshot 中看到的那样：“类型的参数” {moves: (el: any, source: any, handle: any, Sibling: any) => boolean; }' 不能分配给“DragulaOptions”类型的参数。对象文字只能指定已知属性，并且“ move'在类型'Dragula Options'中不存在。（参数）句柄：任何“
OK - 但这不是代码错误，而是缺少 od @type 错误。我在 Stackblitz 上看到了这个错误，但它确实有效。

【解决方案2】：

这对我有用。

导入这些依赖项。

import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs/Subscription';

.ts 文件 -


MANY_ITEMS = 'MANY_ITEMS';
subs = new Subscription();

  constructor(private dragula: DragulaService) { 

    this.subs.add(dragula.dropModel(this.MANY_ITEMS)
      .subscribe(({ el, target, source, sourceModel, targetModel, item }) => {

        console.log(el, target, source, sourceModel, targetModel, item);

      })
    );
  }

.html 文件 -


<ul [(dragulaModel)]='arrayList' [dragula]="MANY_ITEMS">
  <li>one</li>
  <li>two</li>
</ul>

您将能够拖动“一”和“二”列表项。

【讨论】：