如何使用Angular 2的Dragula使某些div元素不可拖动

Question

我已经能够成功地将ng2-dragula与我的项目集成，但我仍然不知道如何制作一些div non draggable。

我曾尝试使用一些css和htmlsdraggable="false"作为div，但没有成功。似乎无论我说什么，dragula都会在之后插入指令并覆盖所有内容。也许我错了。。。

有人知道如何做到这一点吗？

例如：

<div [dragula]="'group'">
    <div>1</div>
    <div>2</div>
    <div [dragula]="'group'">
        <div>3</div>
        <div class="donotdrag">4</div>
        <div>5</div>
    </div>
</div>

如何使类donotdrag的div不可拖动？

Answer 1

您可以使用无效选项来执行此操作。

只需在组件构造函数中通过dragulaService.setOptions设置选项，如：

dragulaService.setOptions('group', {
  invalid: (el, handle) => el.classList.contains('donotdrag')
});

Demo plunker