Question

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

要注意的相关代码：

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

(Error)：

类型'{moves：（el：any，source：any，handle：any，sibling：任何）=>布尔值; }'不能分配给类型的参数 'DragulaOptions'。对象文字只能指定已知属性，并且“拖动选项”类型中不存在“动作”。（参数）句柄：任意

请注意，当有migration guide和changelog时，它会state how to replace the setOptions into create group。但对于我来说仍然无法正常工作。

有什么办法可以同时使用这两个功能？还是我想念一些明显的东西？

Answer 1

您是否要：创建组并一起使用放置功能？

我们将createGroup与drop一起使用，但有一个小的区别但又有小的区别-订阅服务中添加了Drop服务，但我认为这没有任何关系。所以我们的代码是hire：

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

您的标签不可拖动，因此您会得到所需的东西。

Answer 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>

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

ng2-dragula setOptions和删除版本问题

2 个答案: