Untitled

----
<div class="w3-row">
    <!-- Gallery -->
    <div class="w3-col s6 w3-border">
        <div *ngFor="let image of galleryImages" 
             class="w3-card-4" 
             draggable="true" 
             (dragstart)="onDragStart($event, image)">
            <img [src]="image" style="width:100%">
        </div>
    </div>

    <!-- Front and Back Boxes -->
    <div class="w3-col s6 w3-border">
        <div class="w3-container w3-border" 
             (drop)="onDrop($event, 'front')" 
             (dragover)="allowDrop($event)">
            <img [src]="frontImage" style="width:100%">
        </div>
        <div class="w3-container w3-border" 
             (drop)="onDrop($event, 'back')" 
             (dragover)="allowDrop($event)">
            <img [src]="backImage" style="width:100%">
        </div>
    </div>
</div>

----

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  galleryImages = ['path/to/image1.jpg', 'path/to/image2.jpg', ...];
  frontImage = 'path/to/default';
  backImage = 'path/to/defaultBackImage';

onDragStart(event: DragEvent, image: string) {
event.dataTransfer?.setData('text', image);
}

allowDrop(event: DragEvent) {
event.preventDefault();
}

onDrop(event: DragEvent, box: string) {
event.preventDefault();
const image = event.dataTransfer?.getData('text');
if (box === 'front') {
this.frontImage = image;
} else if (box === 'back') {
this.backImage = image;
}
}
}

---