Question

我试图使用拖放ng2-dragula，我让它拖放，但根据项目它有点复杂。

我需要在动态安装的TD

中添加规则

示例：

classHours的json

[ { ＆＃34; cd_horario_das_aulas＆＃34;：＆＃34; 1＆＃34;，＆＃34; hr_inicial＆＃34;：＆＃34; 08：00：00＆＃34;，＆＃34; hr_final＆＃34;：＆＃34; 09：00：00＆＃34; }， { ＆＃34; cd_horario_das_aulas＆＃34;：＆＃34; 2＆＃34;，＆＃34; hr_inicial＆＃34;：＆＃34; 10：00：00＆＃34;，＆＃34; hr_final＆＃34;：＆＃34; 11：00：00＆＃34; }， { ＆＃34; cd_horario_das_aulas＆＃34;：＆＃34; 3＆＃34;，＆＃34; hr_inicial＆＃34;：＆＃34; 13：00：00＆＃34;，＆＃34; hr_final＆＃34;：＆＃34; 14：00：00＆＃34; }， { ＆＃34; cd_horario_das_aulas＆＃34;：＆＃34; 4＆＃34;，＆＃34; hr_inicial＆＃34;：＆＃34; 15：00：00＆＃34;，＆＃34; hr_final＆＃34;：＆＃34; 16：00：00＆＃34; }， { ＆＃34; cd_horario_das_aulas＆＃34;：＆＃34; 5＆＃34;，＆＃34; hr_inicial＆＃34;：＆＃34; 17：00：00＆＃34;，＆＃34; hr_final＆＃34;：＆＃34; 18：00：00＆＃34; } ]

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


}

有没有人有任何提示？

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

拖放whith angular ng2-dragula

1 个答案: