Search code examples
htmlangulardragulang2-dragula

How can i make certain div elements non draggable using Dragula for Angular 2

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?

Solution

  • 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