Question

我有3个车道（早餐，午餐，晚餐）每个都有一个*ngFor根据meal_type过滤掉项目我想做的是使用dragula来拖动项目在不同的车道之间，并在下降时更新meal_type。

<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(
    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');
  }

Answer 1

你可以为dragula内容添加不同的id（id =＆＃39; dish＆＃39;）。

<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方法上

检查args。

我相信args for drop（el，target，source，sibling）所以你可以从target.id获取drop容器。

使用ng2-dragula更新dropbase上的firebase值

1 个答案: