6

I use drag&drop via ng2-dragula. The drag&drop functionality is applied this way:

<div class='container' [dragula]='"first-bag"'>
    <div>item 1</div>
    <div>item 2</div>
</div>

If I understand angular 2 properly, the way how [dragula]='"first-bag"' is attached to my div is called Attribute Directive in Angular 2.

Now I have a variable in my component called enableDragNDrop:boolean. How can I use this variable to attach [dragula]='"first-bag"' to my div only when enableDragNDrop == true ?

If enableDragNDrop == false, i want this:

<div class='container'><!-- no dragula attribute directive, no dragndrop -->
    <div>item 1</div>
    <div>item 2</div>
</div>
Ben Taliadoros
  • 7,003
  • 15
  • 60
  • 97
Peter
  • 2,162
  • 3
  • 21
  • 27

1 Answers1

3

There is no way to dynamically add/remove directives by adding/removing a selector. The selector dragula has to be static HTML for the directive to get applied. You can only use features of dragula to enable/disable it if it provides such a configuration option.

I haven't used ng2-dragula or dragula but I guess you can assign a dragModel and configure it this way

<div class='container' dragula [dragulaModel]="dragulaModel">

dragulaModel = {start: function () {}};

and when you want to enable it, assign a model that doesn't disable start

enableDrag() {
  this.dragulaModel = {};
}

Not tested, just skimmed a bit through the source.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • thanks for reply. when `dragulaModel = {start: function () {}};`, drag&drop is allowed, and when item is moved and droped, following error is thrown: `TypeError: sourceModel.splice is not a function`. Btw, there are two approaches how to deal with the issue: one is to completely prevent drag&drop from happening - so far we don't know how to do this. Second approach is that drag&drop is possible, but the results are not stored, i.e. `if(enableDragNDrop) this.dragulaService.dropModel.subscribe(this.myCustomOnDropCallback.bind(this))` – Peter May 04 '16 at 10:39
  • I don't plan to dive deeper into this topic because I currently don't plan to use dragula myself. I just tried to help from an Angular point-of-view. I might get better results by asking about dragula specifically without mentioning Angular. – Günter Zöchbauer May 04 '16 at 10:42
  • ok, I found one approach how to conditionally completely disable drag&drop in angular 2 in dragula, and that is to use [moves callback](https://github.com/bevacqua/dragula#optionsmoves) to allow move only when moved dom element has a particular css -- this css class is assigned to draggable element by angular 2 only when `enableDragNDrop == true`. – Peter May 06 '16 at 13:24
  • That sounds promising. – Günter Zöchbauer May 06 '16 at 14:27