有角ng2-dragula的拖放

Question

我尝试使用ng2-dragula的拖放，我让它拖放，但是基于这个项目，它变得有点复杂了。

我需要在动态挂载的TD中添加规则。

示例：

classHours的json

{ "cd_horario_das_aulas"："1"，"hr_inicial"："08:00:00"，"hr_final"："09:00:00“}，{ "cd_horario_das_aulas"："2"，"hr_inicial"："10:00:00"，"hr_final"："11:00:00”}，{ "cd_horario_das_aulas"："3“、"hr_inicial"：”13:00“、"hr_final"："14:00:00”}、{ "cd_horario_das_aulas"："4“、"hr_inicial"："15:00:00”、"hr_final"："16:00:00“}，{ "cd_horario_das_aulas"："5"，"hr_inicial"：“17: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>

component.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
    });
  }


}

有人有小费吗？

工作实例

Answer 1

下面是一个示例，它不是使用ng2-dragula，而是使用HTML5拖放，后者更简单。

模板-可拖

为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，请单击“打开新窗口”按钮，因为预览窗格不起作用。