Hola tengo un problema al realizar drag and drop, os pongo en situación necesito crear grupos de usuarios en cual existen terapeutas y pacientes, solo puede haber 1 terapeuta por grupo y pacientes todos los que quiera, pero no pueden repetirse...
Necesito que solo se pueda arrastrar 1 item y si intento arrastrar otro no me deje.
También me gustaría preguntar como puedo hacer para insertar los datos en la base de datos mysql.
<div class="card-top-grupos">
<div class="card-header">
<span><i class="fas fa-users"></i> Grupo de usuarios 1</span>
<div class="card-header-actions save-button">
<a href="" class="card-header-action" target="_blank">
<small class="text-muted" (click)='saveGroup()'><i class="far fa-check-circle"></i> GUARDAR</small>
</a>
</div>
</div>
<div class="card-body">
<div class="terapeutas-box" cdkDropList #pendingList1="cdkDropList" [cdkDropListData]="terapeutasgrupouno" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
<div class="grupo-terapeuta" *ngFor="let item of terapeutasgrupouno" [cdkDragData]="item" cdkDrag><i class="fas fa-user-md fa-icon"></i> {{item}}</div>
<p class="dragdrop" *ngIf="terapeutasgrupouno == ''"><i class="fas fa-user-md fa-icon"></i> Arrastra un terapeuta</p>
</div>
<div class="pacientes-box" cdkDropList #pendingList="cdkDropList" [cdkDropListData]="pacientesgrupouno" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
<div class="grupo-paciente" *ngFor="let item of pacientesgrupouno" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}}</div>
<p class="dragdrop" *ngIf="pacientesgrupouno == ''"><i class="fas fa-user-injured fa-icon"></i> Añade pacientes</p>
</div>
</div>
</div>
<!-- SEGUNDO BLOQUE -->
<div class="card card-bottom">
<div class="card-header">
<span><i class="fas fa-users"></i> Grupo de usuarios 2</span>
</div>
<div class="card-body" cdkDropList #pendingList2="cdkDropList" [cdkDropListData]="grupo2" [cdkDropListConnectedTo]="[pendingList3]" (cdkDropListDropped)="drop($event)">
<div class="grupo-paciente" *ngFor="let item of grupo2" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}}</div>
</div>
</div>
</div>
<!-- SEGUNDA COLUMNA -->
<div class="col-md-2">
<!-- PRIMER BLOQUE -->
<div class="card card-bottom">
<div class="card-header">
<span><i class="fas fa-users"></i> Pacientes</span>
</div>
<div class="card-body" cdkDropList #pacientesList="cdkDropList" [cdkDropListData]="pacientes" [cdkDropListConnectedTo]="[pendingList, pendingList2]" (cdkDropListDropped)="drop($event)">
<div class="form-group">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Buscar...">
</div>
</div>
<div class="paciente" *ngFor="let item of pacientes" [cdkDragData]="item" cdkDrag><i class="fas fa-user-injured fa-icon"></i> {{item}} </div>
</div>
</div>
</div>
<!-- TERCERA COLUMNA -->
<div class="col-md-2">
<!-- PRIMER BLOQUE -->
<div class="card card-bottom">
<div class="card-header">
<span><i class="fas fa-users"></i> Terapeutas</span>
</div>
<div class="card-body" cdkDropList #terapeutasList="cdkDropList" [cdkDropListData]="terapeutas" [cdkDropListConnectedTo]="[pendingList1]" (cdkDropListDropped)="droptrash($event)">
<div class="form-group">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Buscar...">
</div>
</div>
<div class="terapeuta" *ngFor="let item of terapeutas" [cdkDragData]="item" cdkDrag><i class="fas fa-user-md fa-icon"></i> {{item}} </div>
</div>
</div>
Ese es mi html y mi componente es el siguiente:
papelera = [];
pacientesgrupouno = [];
terapeutasgrupouno = [];
grupo2 = [];
terapeutas = [
'Ana lopez',
'Erica sanchez',
'Marta Sanchez',
'Mario Gonzales',
];
pacientes = [
'Emilio Escobar',
'Daniel Bobis',
'Gustavo Verdejo',
'Pablo Ramos'
];
droptrash(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
console.log('dropped Event', `> dropped '${event.item.data}' into '${event.container.id}'`);
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex);
} else {
console.log('dropped Event', `> dropped '${event.item.data}' into '${event.container.id}'`);
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
console.log('dropped Event',`> dropped '${event.item.data}' into '${event.container.id}'`);
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex);
} else {
console.log('dropped Event',`> dropped '${event.item.data}' into '${event.container.id}'`);
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
Les dejo una captura para que puedan apreciar a que me refiero muchas gracias!