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

Question

我有一个带有librairie ng2-dragula的角度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 for dragula bag的选项有一个属性＆＃34;移动＆＃34;这是一个随dragstart事件的目标元素提供的函数，作为第三个参数（句柄）

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

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

文档中有一段演示：

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

  

搜索＆＃34;拖动手柄漂浮您的游轮？＆＃34; ...

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

希望有所帮助