3

I have been able to successfully integrate ng2-dragula with my project, but I still cannot figure out how to make some divs non draggable.

I have tried to use some css and also htmls draggable="false" for the div but no success. It seems like whatever I put, dragula will insert its directives afterwards and override everything. Maybe I am wrong...

Does anyone know how to achieve this?

For example:

<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>

How can i make the div with class donotdrag non draggable?

Brian
  • 4,958
  • 8
  • 40
  • 56

1 Answers1

8

You can use invalid options to do that.

Just set options via dragulaService.setOptions in your component constructor like:

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

Demo plunker

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • @Brian Put `!` front of `el.classList.contains('donotdrag')` like `!el.classList.contains('donotdrag')` – yurzui Jul 20 '16 at 06:00
  • Also, if you are getting error - "BAG_NAME is already exists", use `viewProviders: [DragulaService]` in your component, it should fix the issue. – Vintesh Dec 15 '16 at 02:48