如何使用Dragula for Angular 2

时间:2016-07-20 00:11:47

标签: html angular dragula ng2-dragula

我已经能够成功地将ng2-dragula与我的项目集成,但我仍然无法弄清楚如何制作一些div non draggable

我尝试使用一些css和htmls draggable="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不可拖动?

1 个答案:

答案 0 :(得分:7)

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

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

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

<强> Demo plunker