ng2-dragula group items in div

Question

I come across the ng2-dragula project when trying to prototype some drag and drop functionality. I was wondering how to group the following structure as one 'drake' entity?

<div>
   <img .../>
   <img .../>
   <span>...</span>
</div>

When I add [dragula] in the div, every item inside div is considered a separate draggable item. I would like to combine those as one draggable item.

Thanks!

What I did was to add another div inside the div, which group the elements. However, it does not produce the result that I want. Looked at ng2-dnd, the syntax seems to be more straightforward. — ethan, Mar 09 '17 at 04:42

score 0 · Answer 1 · answered Apr 28 '17 at 14:28

In your case you need use dragulaModel.

Example

<div class='wrapper'>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
    <div *ngFor='let text of many' [innerHtml]='text'></div>
  </div>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
    <div *ngFor='let text of many2' [innerHtml]='text'></div>
  </div>
</div>

class RepeatExample {
  public many: Array<User> = [{'id':123,'name':'stack'},{'id':1234,'name':'stackover'}];
  public many2: Array<User> = [];

  constructor(private dragulaService: DragulaService) {
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value) => {
      this.onRemoveModel(value.slice(1));
    });
  }

  private onDropModel(args) {
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) {
    let [el, source] = args;
    // do something else
  }
}

ng2-dragula group items in div

1 Answers1