如何使用 Dragula 的 drop 函数作为事件监听器来更新数组的顺序

Question

我正在尝试在 Angular 中使用 dragula 拖放时更新图像数组的顺序。我查看了文档，但不知所措并不断收到此错误 "Cannot invoke an expression whose type lacks a call signature. Type 'EventEmitter' has no compatible call signatures." 在阅读文档时，提到了 drake 实例，我想知道这是否是我需要的加入？非常感谢任何 help/advice。

最终，我只想在放置事件中触发保存功能（使用新的数组顺序）。似乎是一件简单易行的事情，但我在让 drop 事件正常工作方面遇到了很多麻烦。

import { Component, OnInit, OnDestroy } from 
'@angular/core';
import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';

@Component({
selector: 'app-images',
templateUrl: './images.component.html',
styleUrls: ['./images.component.scss']
  })

export class ImagesComponent implements OnInit, OnDestroy {
subs = new Subscription();

constructor(
    private notifyService: NotifyService,
    private propertiesService: PropertiesService,
    private dragulaService: DragulaService
  ) { }
ngOnInit() {
this.subs.add(this.dragulaService.drop('images')
        .subscribe(({ name, el, target, source, sibling }) => {
            // fire a save function to update new array order
        })
    );
  }
ngOnDestroy() {
    // destroy all the subscriptions at once
    this.subs.unsubscribe();
  }
}

Answer 1

我认为 drake 是最简单的方法，但我认为您的方法不对。下面是简单的示例：

首先你要创建一个组，所以在你的构造函数中请添加：

this.dragulaService.createGroup('IMAGES', {});

在下一步中，请将此组添加到您的 HTML 元素容器（您的项目的父级）。在这个例子中：

<div class="images-container" dragula="IMAGES">
   <img src="a.png">
   <img src="b.png">
</div>

最后你可以使用 drake:

this.dragula$.add(this.dragulaService.drop('IMAGES')
    .subscribe(({name, el, target, source, sibling}) => {
          // hire is your code
        })
    );

这应该有效。如果您有任何问题，请为此创建 StackBlitz 演示 - 我会看看这个。

如何使用 Dragula 的 drop 函数作为事件监听器来更新数组的顺序

How to use Dragula's drop function as an event listener to update the order of an array

arrays

drag-and-drop

event-listener

ng2-dragula

angular