使用角 ng2-dragula 拖放

Question

我正在尝试使用 ng2-dragula 的拖放，我得到了它的拖放，但基于项目它有点复杂。

我需要在动态挂载的 TD 中添加学科

例子：

classHours的json

[ { “cd_horario_das_aulas”：“1”， "hr_initial": "08:00:00", “hr_final”：“09:00:00” }, { “cd_horario_das_aulas”：“2”， "hr_initial": "10:00:00", “hr_final”：“11:00:00” }, { “cd_horario_das_aulas”：“3”， "hr_initial": "13:00:00", “hr_final”：“14:00:00” }, { “cd_horario_das_aulas”：“4”， "hr_initial": "15:00:00", “hr_final”：“16:00:00” }, { “cd_horario_das_aulas”：“5”， "hr_initial": "17:00:00", “hr_final”：“18:00:00” } ]

  <table class="table table-bordered" style="margin-top: 25px">
    <tr>
      <td></td>
      <td *ngFor='let classHour of classHours'>
        {{classHour?.hr_inicial}} às {{classHour?.hr_final}}
      </td>
    </tr>



    <tr>
      <td>Monday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>
    <tr>
      <td>Thursday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>
    <tr>
      <td>Friday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td *ngFor='let classHour of classHours' [dragula]='"another-bag"' [dragulaModel]=''></td>
    </tr>

  </table>

组件.ts

import { Component, OnInit } from '@angular/core';
import { NotificationService } from '../shared/messages/notification.service';
import { Horario } from './horario.model'
import { HorarioService } from './horario.service';  

import { DragulaService } from 'ng2-dragula/ng2-dragula';


@Component({
  selector: 'app-horario',
  templateUrl: './horario.component.html',
  styleUrls: ['./horario.component.css']
})
export class HorarioComponent implements OnInit {
  horarios: Horario[];
  total: number = 0;
  loader: boolean = true;
  classHours: any[];
  turmas: any[];


  disciplinas: any[] = [{ "disciplina": "matematica", "horario": "07:00" }, { "disciplina": "Geografia", "horario": "07:00" }, { "disciplina": "Fisica", "horario": "07:00" }, { "disciplina": "Portugues", "horario": "07:00" },]


  diaSemana:any[] = ["SEGUNDA","TERÇA","QUARTA","QUINTA","SEXTA","SÁBADO"];
  gradeHorarioSegunda: any[] =[]
  gradeHorarioTerca: any[] =[]
  gradeHorarioQuarta: any[] =[]
  gradeHorarioQuinta: any[] =[]
  gradeHorarioSexta: any[] =[]
  gradeHorarioSabado: any[] =[]


  constructor(private dragulaService: DragulaService, private horarioService: HorarioService, private notificationService: NotificationService) {
    dragulaService.setOptions('another-bag', {
      copy: true
    })

  }
  ngOnInit() {
    this.getHorarios();
    this.getHorarioDasAulas();
  }

  getHorarios() {
    this.horarioService.getHorarios().subscribe(horarios => {
      this.horarios = horarios
      this.loader = false
    });
  }
  getHorarioDasAulas() {
    this.horarioService.getHorarioDasAulas().subscribe(classHours => {
      this.classHours = classHours
      this.loader = false
    });
  }


}

有人有什么建议吗？

working example

Answer 1

这是一个示例不使用 ng2-dragula 而是使用 HTML5 Drag and Drop，这在 IMO 中更简单。

模板 - 可拖动

为disciplinas添加行，并用draggable="true"标记每个项目，并在拖动开始时添加一个获取数据的事件-(dragstart)="dragStart($event)"

<table class="table table-bordered" style="margin-top: 25px">
  <tr>
    <td *ngFor='let disciplina of disciplinas' draggable="true" 
     (dragstart)="dragStart($event)" >
      {{disciplina.disciplina}}
    </td>
  </tr>
  <tr>
    <td *ngFor='let classHour of classHours'>
      {{classHour?.hr_inicial}} às {{classHour?.hr_final}} ||
    </td>
  </tr>

模板 - 可放置

添加(dragover) 事件来放置目标，并添加(drop) 事件来处理放置。

<tr>
  <td>Monday</td>
    <td *ngFor='let classHour of classHours' 
      (dragover)="allowDrop($event)" (drop)="drop($event)"></td>
</tr>

组件代码

这是代码中的三个事件处理程序。

dragStart(ev) {
  ev.dataTransfer.setData('text', ev.target.outerText);
}

allowDrop($event) {
  $event.preventDefault();
}

drop($event) {
  $event.preventDefault();
  const data = $event.dataTransfer.getData('text');
  const target = $event.target;
  target.textContent = data;
}

工作示例：StackBlitz。请注意，如果使用 Chrome，请单击“在新窗口中打开”按钮，因为预览窗格不起作用。