angular - 使用 ng2-dragula 从特殊位置移动项目

Question

我有一个带有图书馆ng2-dragula的 angular 4 应用程序。我想拖放一些项目，但如果我们从一个特殊的地方（带有图标）而不是从项目的任何地方获取项目。

这是我的代码是我的 ts 文件：

constructor(private dragulaService: DragulaService) {
    dragulaService.drop.subscribe((value) => {
        this.onDrop(value);
    });
}

还有我的 html 文件：

<tbody [dragula]='"other-bag"' [dragulaModel]='commands'>
    ...
</tbody>

所以，我有类似这张照片的东西，但我想允许移动，只要我们从 2 个垂直条中取出项目。

你知道我该怎么做吗？

Answer 1

TL:DR Dragula 袋子的选项有一个属性“moves”，这是一个函数，该函数与 dragstart 事件的目标元素作为第三个参数（句柄）一起提供

  moves: function (el, source, handle, sibling) {
    return true; // elements are always draggable by default
  },

因此您可以检查句柄元素的属性以检查是否要允许拖动

文档中有一段演示：

https://valor-software.com/ng2-dragula/index.html

搜索“拖动手柄漂浮您的游轮？” ...

<div [dragula]='"sixth-bag"'></div>
<div [dragula]='"sixth-bag"'></div>

class MuchExample {
  constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('sixth-bag', {
      moves: function (el, container, handle) {
        return handle.className === 'handle';
      }
    });
  }
}

希望能帮助到你