使用 ng2-dragula 从特殊位置移动物品

Question

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

这是我的代码是我的 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

search for "Drag handles float your cruise?" ...

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

希望对您有所帮助

使用 ng2-dragula 从特殊位置移动物品

Move items with ng2-dragula from special place

ng2-dragula

angular