1

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

我需要在动态安装的 TD 中添加学科

例子：

上课时间的json

[ {“cd_horario_das_aulas”：“1”，“hr_initial”：“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: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_inicial”： “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
    });
  }


}

有没有人有任何提示？

工作示例

4

1 回答 1

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

于 2018-02-07T23:27:00.790 回答