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

【问题标题】：How can i make certain div elements non draggable using Dragula for Angular 2如何使用 Dragula for Angular 2 使某些 div 元素不可拖动
【发布时间】：2016-07-20 00:11:46
【问题描述】：

我已经能够成功地将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 不可拖动？

【问题讨论】：

标签： html angular dragula ng2-dragula

【解决方案1】：

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

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

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

Demo plunker

【讨论】：

@Brian Put ! 前面的el.classList.contains('donotdrag') 喜欢!el.classList.contains('donotdrag')
另外，如果您收到错误 - “BAG_NAME 已存在”，请在组件中使用 viewProviders: [DragulaService]，它应该可以解决问题。