1

I have 3 lanes (breakfast, lunch, dinner) each has a *ngFor thats filters out items based on a meal_type what I would like to do is use dragula to be able to drag the items between the different lanes and update the meal_type on drop.

<content [dragula]='"dishes"' [dragulaModel]='dishs$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'breakfast'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

<content [dragula]='"dish"' [dragulaModel]='dishs$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'lunch'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

<content [dragula]='"dishes"' [dragulaModel]='dishes$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'dinner'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

constructor

constructor(
    private modalService: NgbModal,
    private route: ActivatedRoute,
    private dragulaService: DragulaService,
    private _teamsService: TeamsService,
  ) {
    dragulaService.drop.subscribe((value) => {
      console.log('value', value);
      this.onDrop(value.slice(1));

      // I want to update the `meal_type` here 
      // and then I can create an updateMealType() 
      // function that will update Firebase.  
      // But I don't know how to tell which bag I have 
      // dropped the 'dish' into as they have the same bag name.

    });
  }




  // Dragula Events
  private hasClass(el: any, name: string) {
    return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className);
  }

  private addClass(el: any, name: string) {
    if (!this.hasClass(el, name)) {
      el.className = el.className ? [el.className, name].join(' ') : name;
    }
  }

  private removeClass(el: any, name: string) {
    if (this.hasClass(el, name)) {
      el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), '');
    }
  }

  private onDrag(args) {
    let [e, el] = args;
    console.log(args);
    this.removeClass(e, 'ex-moved');
  }

  private onDrop(args) {
    let [e, el] = args;
    this.addClass(e, 'ex-moved');
  }

  private onOver(args) {
    let [e, el, container] = args;
    this.addClass(el, 'ex-over');
  }

  private onOut(args) {
    let [e, el, container] = args;
    this.removeClass(el, 'ex-over');
  }
4

1 回答 1

0

您可以向 Dragula 内容添加不同的 id (id = 'dishes')。

<content id = 'dishes' [dragula]='"dishes"' [dragulaModel]='dishes$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'dinner'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

在 onDrop 方法上检查参数。

我相信 drop(el, target, source, 兄弟) 的 args，所以你可以从 target.id 获取 drop 容器。

于 2017-04-28T13:21:39.260 回答