Drag and Drop whith angular ng2-dragula

Question

I'm trying to use drag and drop of ng2-dragula, I got it to drag and drop, but based on the project it got a bit complicated.

I need to add disciplines in a dynamically mounted TD

Example:

json of classHours

[ { "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: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: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
    });
  }


}

Does anyone have any tips?

working example

Answer 1

Here is an example not using ng2-dragula but using HTML5 Drag and Drop, which is IMO is simpler.

template - draggable

Add the row for disciplinas, and mark each item with draggable="true" and add an event to get data at the beginning of the drag - (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>

template - droppable

Add (dragover) event to drop targets and a (drop) event to handle the drop.

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

component code

Here is the three event handlers in the code.

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

Working example: StackBlitz. Note, if using Chrome click the 'Open in new window' button as the preview pane does not work.