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

Question

我已经能够成功地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>

我如何使div同类donotdrag不可拖动？

Answer 1

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

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

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

演示人员