2

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!

introducir la descripción de la imagen aquí

1 respuesta 1

0

En los métodos donde controlas el drop puedes checkear lógica adicional como la que planteas.

Por ejemplo:

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

        const elementoOrigen = event.container.data[event.previousIndex];
        if(event.container.data.find(element => element === elementoOrigen)) 
         { 
            return; // No se hace nada, si no funciona prueba event.preventDefault();
         }
        else 
         {
          copyArrayItem(
              event.previousContainer.data,
            event.container.data,
            event.previousIndex,
            event.currentIndex);
        }}
      }

event.container.data y event.previousContainer.data son los arrays de cada zona y puedes iterar sobre ellos como prefieras.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.