Arrastre y suelte iconos de imágenes utilizando Angular.

02 Aug, 2023 Programación 0

He diseñado una cuadrícula utilizando Angular. Voy a arrastrar algunas imágenes de la lista de imágenes y las soltaré en las casillas de la cuadrícula. A continuación, adjunto el diseño:

Aquí está mi código Typescript

Código HTML:

<div class="row">
  <div class="col-10" cdkdroplist="" #celllist="cdkDropList" [cdkdroplistdata]="cells" [cdkdroplistconnectedto]="[itemList]">
    <mat-grid-list cols="10">
      <mat-grid-tile *ngfor="let cell of cells" [style.background]="cell.color">
        <img *ngif="cell.url" src="{{cell.url}}">
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <div class="col-2" cdkdroplist="" #itemlist="cdkDropList" [cdkdroplistdata]="officeItems" [cdkdroplistconnectedto]="[cellList]" (cdkdroplistdropped)="drop($event)">
    <pre *ngfor="let item of officeItems" cdkdrag=""><img src="{{item}}" title="Sofa" style="margin-top: 10px;"></pre>
  </div>
</div>

Dos arreglos de datos en el archivo TS:

cells= [
  { id: 1, minDistanceToA: 0.0 },
  { id: 2, minDistanceToA: 1.0 },
  { id: 3, minDistanceToA: 2.0 },
  { id: 4, minDistanceToA: 3.0 },
  { id: 5, minDistanceToA: 4.0 }
];

officeItems: any = ['../assets/images/sofa1.png', '../assets/images/chair.png'];

Puedo arrastrar las imágenes, pero no puedo soltarlas. Cuando intento soltarlas, se vuelven a colocar en el div anterior.

davy.ai

August 2, 2023 at 9:06 am

Parece que ha implementado correctamente la funcionalidad de arrastrar y soltar utilizando la API de arrastrar y soltar de Angular CDK. Sin embargo, parece que puede haber un problema con su función de soltar.

En la implementación actual, si el elemento soltado es de un contenedor diferente al contenedor de destino, está copiando el elemento utilizando la función copyArrayItem(). Esto significa que el elemento original todavía está presente en el contenedor anterior y la copia se agrega al contenedor de destino.

Para solucionar este problema, puede modificar la función drop() para eliminar el elemento del contenedor anterior si se copió en el contenedor de destino. Aquí tienes una implementación actualizada:

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  } else {
    const item = event.previousContainer.data[event.previousIndex];
    copyArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
    if (event.previousContainer.id === 'itemList') {
      // Eliminar el elemento del contenedor anterior si se copió
      event.previousContainer.data.splice(event.previousIndex, 1);
    }
  }
}

Además, asegúrese de que la propiedad id de la directiva cdkDropList esté configurada con un valor único para cada contenedor. Esto asegurará que los contenedores estén conectados correctamente y que los elementos se puedan arrastrar y soltar entre ellos.

<div class="row">
  <div class="col-10" cdkdroplist="" #celllist="cdkDropList" [cdkdroplistdata]="cells" [cdkdroplistconnectedto]="[itemList]" id="cellList">
    <!-- ... -->
  </div>

  <div class="col-2" cdkdroplist="" #itemlist="cdkDropList" [cdkdroplistdata]="officeItems" [cdkdroplistconnectedto]="[cellList]" (cdkdroplistdropped)="drop($event)" id="itemList">
    <!-- ... -->
  </div>
</div>

Espero que esto te ayude a resolver el problema e implementar la funcionalidad de arrastrar y soltar con éxito.</string[]>

Answer

davy.ai

August 2, 2023 at 9:06 am
Parece que ha implementado correctamente la funcionalidad de arrastrar y soltar utilizando la API de arrastrar y soltar de Angular CDK. Sin embargo, parece que puede haber un problema con su función de soltar.

En la implementación actual, si el elemento soltado es de un contenedor diferente al contenedor de destino, está copiando el elemento utilizando la función copyArrayItem(). Esto significa que el elemento original todavía está presente en el contenedor anterior y la copia se agrega al contenedor de destino.

Para solucionar este problema, puede modificar la función drop() para eliminar el elemento del contenedor anterior si se copió en el contenedor de destino. Aquí tienes una implementación actualizada:
```
drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  } else {
    const item = event.previousContainer.data[event.previousIndex];
    copyArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
    if (event.previousContainer.id === 'itemList') {
      // Eliminar el elemento del contenedor anterior si se copió
      event.previousContainer.data.splice(event.previousIndex, 1);
    }
  }
}
```
Además, asegúrese de que la propiedad id de la directiva cdkDropList esté configurada con un valor único para cada contenedor. Esto asegurará que los contenedores estén conectados correctamente y que los elementos se puedan arrastrar y soltar entre ellos.
```
<div class="row">
  <div class="col-10" cdkdroplist="" #celllist="cdkDropList" [cdkdroplistdata]="cells" [cdkdroplistconnectedto]="[itemList]" id="cellList">
    
  </div>

  <div class="col-2" cdkdroplist="" #itemlist="cdkDropList" [cdkdroplistdata]="officeItems" [cdkdroplistconnectedto]="[cellList]" (cdkdroplistdropped)="drop($event)" id="itemList">
    
  </div>
</div>
```
Espero que esto te ayude a resolver el problema e implementar la funcionalidad de arrastrar y soltar con éxito.</string[]>

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Arrastre y suelte iconos de imágenes utilizando Angular.

Answer

davy.ai